:root {
  --bg: #07070f;
  --surface: rgba(15, 15, 25, 0.96);
  --surface-strong: rgba(18, 18, 38, 0.98);
  --surface-soft: rgba(255,255,255,0.06);
  --border: #7247ff;
  --text: #eff1ff;
  --muted: #9fa6d8;
  --accent: #8d76ff;
  --accent-strong: #61e1ff;
  --button-from: #ff69d3;
  --button-to: #7b67ff;
  --green: #31df57;
  --green-dark: #138135;
  --danger: #ff7b92;
  --warn: #ffc768;
  --shadow: 0 22px 60px rgba(19, 11, 64, 0.44);
  --orange: #ff6f43;
  --yellow: #ffd54a;
  --lime: #7fef61;
  --cyan: #69c0ff;
  --pink: #ff77cb;
  --purple: #b58bff;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Press Start 2P', 'Courier New', Courier, monospace;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
}

html, body { min-height: 100%; }
body.circuits-page {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(120, 85, 255, 0.20), transparent 18%),
    radial-gradient(circle at top right, rgba(76, 222, 255, 0.15), transparent 18%),
    linear-gradient(180deg, #06060d 0%, #090a17 42%, #040407 100%);
  overflow-x: hidden;
}

body.circuits-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.24;
  pointer-events: none;
}

body.circuits-page::after {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, transparent 48%, rgba(255,255,255,0.03) 50%, transparent 52%);
  pointer-events: none;
}

button, input, select { font: inherit; }
button { color: inherit; }

.navbar {
  position: sticky;
  top: 10px;
  z-index: 60;
  margin: 10px 10px 0;
  background: rgba(12, 12, 22, 0.95);
  border: 4px solid rgba(114, 71, 255, 0.45);
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.navbar-container {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: space-between;
  padding: 14px 18px;
  flex-wrap: wrap;
}
.navbar-logo { display:flex; align-items:center; }
.logo-image { height: 40px; width: auto; max-height: 40px; object-fit: contain; }
.nav-menu {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--muted);
  padding: 11px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.04);
  font-size: 0.64rem;
  line-height: 1.2;
}
.nav-link:hover,
.nav-link.active {
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 105, 211, 0.20), rgba(123, 103, 255, 0.18));
  border-color: rgba(97, 225, 255, 0.40);
}
.nav-auth, .nav-user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.btn-login,
.btn-signup,
.btn-profile,
.btn-logout,
.user-greeting {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 0.64rem;
}
.btn-login,
.btn-profile,
.btn-logout,
.user-greeting {
  color: var(--text);
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.08);
}
.btn-signup {
  color: white;
  background: linear-gradient(135deg, var(--button-from), var(--button-to));
  border: 2px solid rgba(255,255,255,0.18);
}
.avatar-letter,
.avatar-letter-large {
  display: inline-grid;
  place-items: center;
  color: #fff;
  font-weight: 900;
  border-radius: 999px;
}
.avatar-letter { width: 28px; height: 28px; font-size: .62rem; }
.avatar-letter-large { width: 56px; height: 56px; font-size: .8rem; }

.circuits-hero {
  margin: 10px 10px 0;
  padding: 26px;
  border-radius: 22px;
  border: 4px solid rgba(114, 71, 255, 0.35);
  background:
    radial-gradient(circle at top right, rgba(97, 225, 255, 0.12), transparent 24%),
    radial-gradient(circle at top left, rgba(255, 105, 211, 0.10), transparent 26%),
    rgba(12, 12, 22, 0.95);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(260px, .9fr);
  gap: 20px;
  position: relative;
  overflow: hidden;
}
.circuits-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), transparent 40%);
  pointer-events: none;
}
.hero-kicker {
  display: inline-flex;
  padding: 8px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  border: 2px solid rgba(97, 225, 255, 0.38);
  background: rgba(97, 225, 255, 0.08);
  color: #ccf8ff;
  font-size: 0.55rem;
}
.circuits-hero h1 {
  margin-bottom: 14px;
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  line-height: 1.15;
  color: var(--text);
}
.circuits-hero p {
  color: var(--muted);
  line-height: 1.85;
  font-size: 0.68rem;
}
.hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.hero-badges span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  font-size: 0.55rem;
  color: var(--text);
}
.hero-panel { display: flex; align-items: stretch; }
.hero-preview-card {
  width: 100%;
  border-radius: 18px;
  border: 3px solid rgba(97, 225, 255, 0.22);
  background: rgba(6, 8, 18, 0.7);
  padding: 18px;
  box-shadow: inset 0 0 20px rgba(97,225,255,0.04);
}
.preview-chip-title {
  color: #ccf8ff;
  margin-bottom: 14px;
  font-size: 0.64rem;
}
.hero-preview-card ul {
  list-style: none;
  display: grid;
  gap: 12px;
}
.hero-preview-card li {
  color: var(--muted);
  font-size: 0.6rem;
  line-height: 1.65;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.03);
}

.app-shell {
  position: relative;
  z-index: 1;
  padding: 10px;
}
.topbar {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  margin-top: 10px;
  background: rgba(12, 12, 22, 0.95);
  border: 4px solid rgba(114, 71, 255, 0.38);
  border-radius: 20px;
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 16px; }
.brand-mark {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  color: #fff;
  font-weight: 900;
  background: linear-gradient(180deg, #35f15c, #17963f);
  border: 3px solid #0d662e;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.18), 0 8px 0 rgba(10, 76, 33, 0.28);
}
.brand h1 {
  font-size: 0.95rem;
  line-height: 1.35;
  margin-bottom: 7px;
}
.brand p {
  font-size: 0.58rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 520px;
}
.top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}
.button,
.icon-button {
  border: 2px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 0.6rem;
  line-height: 1.3;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.button:hover,
.icon-button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.button:active,
.icon-button:active { transform: translateY(1px); }
.button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--button-from), var(--button-to));
  box-shadow: 0 12px 24px rgba(123,103,255,0.22);
}
.button.secondary,
.icon-button {
  color: var(--text);
  background: rgba(255,255,255,0.06);
}
.button.danger {
  color: #ffd3da;
  background: rgba(255,123,146,0.10);
  border-color: rgba(255,123,146,0.32);
}
.button.wide { width: 100%; margin-top: 20px; }

.layout {
  display: grid;
  grid-template-columns: 320px minmax(420px, 1fr) 340px;
  transition: grid-template-columns .22s ease;
  gap: 12px;
  margin-top: 12px;
  min-height: calc(100vh - 360px);
}
.sidebar,
.workspace-panel {
  min-height: 0;
  border-radius: 20px;
  border: 4px solid rgba(114, 71, 255, 0.28);
  background: rgba(12, 12, 22, 0.95);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.left-panel {
  display: flex;
  flex-direction: column;
  padding: 16px;
}
.right-panel {
  display: grid;
  grid-template-rows: minmax(280px, 46%) 1fr;
  gap: 12px;
  padding: 16px;
  transition: width .2s ease, transform .2s ease, opacity .2s ease;
}
#inspectorPanel.panel-compact,
#inspectorPanel.panel-wide { width: auto; }
.layout.inspector-compact { grid-template-columns: 320px minmax(420px, 1fr) 280px; }
.layout.inspector-wide { grid-template-columns: 320px minmax(420px, 1fr) 420px; }
.layout.inspector-hidden { grid-template-columns: 320px minmax(420px, 1fr); }
#inspectorPanel.panel-hidden {
  display: none;
}
.inspector-dock-button {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 70;
  border: 3px solid rgba(97, 225, 255, 0.32);
  border-radius: 18px;
  padding: 14px 16px;
  color: white;
  background: linear-gradient(135deg, rgba(255, 105, 211, 0.92), rgba(123, 103, 255, 0.92));
  box-shadow: 0 16px 32px rgba(34, 15, 88, 0.35);
  cursor: pointer;
  font-size: 0.58rem;
}
.inspector-dock-button.hidden { display: none; }

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.panel-heading h2 {
  font-size: 0.78rem;
  margin-bottom: 8px;
}
.panel-heading p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.56rem;
}
.panel-heading.compact { margin-bottom: 8px; }
.count-pill {
  display: inline-grid;
  place-items: center;
  min-width: 48px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(97,225,255,0.08);
  border: 2px solid rgba(97,225,255,0.28);
  color: #d6f9ff;
  font-size: 0.56rem;
}
.search-wrap {
  display: block;
  margin: 16px 0 12px;
}
.search-wrap span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 0.54rem;
}
.search-wrap input,
.field input,
.field select {
  width: 100%;
  padding: 14px 14px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  outline: none;
  font-size: 0.58rem;
  line-height: 1.4;
}
.search-wrap input:focus,
.field input:focus,
.field select:focus {
  border-color: rgba(97,225,255,0.5);
  box-shadow: 0 0 0 4px rgba(97,225,255,0.10);
}
.category-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.category-tab {
  flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 0.52rem;
  cursor: pointer;
}
.category-tab.active {
  color: white;
  border-color: rgba(97,225,255,0.40);
  background: linear-gradient(135deg, rgba(255, 105, 211, 0.16), rgba(123, 103, 255, 0.18));
}
.palette {
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.palette-section-title {
  color: var(--muted);
  margin: 18px 0 10px;
  font-size: 0.52rem;
  letter-spacing: 0.2em;
}
.palette-chip {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 12px;
  margin-bottom: 9px;
  border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.08);
  border-left: 6px solid var(--chip-color);
  background: linear-gradient(180deg, rgba(21,24,39,0.98), rgba(11,13,24,0.98));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 10px 24px rgba(0,0,0,0.18);
  cursor: grab;
}
.palette-chip:hover { transform: translateX(2px); border-color: rgba(97,225,255,0.22); }
.palette-chip:active { cursor: grabbing; }
.palette-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  font-size: 0.72rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
}
.palette-copy { min-width: 0; }
.palette-category {
  display: inline-block;
  margin-bottom: 4px;
  color: #c6ceff;
  font-size: 0.44rem;
  letter-spacing: 0.12em;
}
.palette-chip strong {
  display: block;
  font-size: 0.58rem;
  line-height: 1.5;
}
.palette-chip small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.46rem;
  line-height: 1.55;
}
.drag-symbol {
  color: rgba(255,255,255,0.72);
  font-size: 0.82rem;
}

.workspace-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.workspace-toolbar {
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 2px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}
.workspace-help strong {
  display: block;
  font-size: 0.62rem;
  color: var(--text);
  margin-bottom: 6px;
}
.workspace-help span,
.zoom-controls {
  color: var(--muted);
  font-size: 0.52rem;
  line-height: 1.55;
}
.zoom-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.icon-button {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.workspace-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: auto;
}
.workspace {
  position: relative;
  width: 1800px;
  height: 1200px;
  overflow: hidden;
  transform-origin: top left;
}
.grid-background {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(120,85,255,0.12), transparent 26%),
    radial-gradient(circle at 82% 74%, rgba(97,225,255,0.08), transparent 28%),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(180deg, #080a16 0%, #070911 100%);
  background-size: auto, auto, 88px 88px, 88px 88px, 18px 18px, 18px 18px, auto;
}
.wire-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.wire-path { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.wire-path.exec { stroke: var(--orange); filter: drop-shadow(0 0 8px rgba(255,111,67,.95)); }
.wire-path.number { stroke: var(--cyan); filter: drop-shadow(0 0 6px rgba(105,192,255,.85)); }
.wire-path.boolean { stroke: var(--lime); filter: drop-shadow(0 0 6px rgba(127,239,97,.75)); }
.wire-path.text { stroke: var(--yellow); filter: drop-shadow(0 0 6px rgba(255,213,74,.8)); }
.wire-path.object { stroke: var(--purple); filter: drop-shadow(0 0 6px rgba(181,139,255,.75)); }
.wire-path.player { stroke: var(--pink); filter: drop-shadow(0 0 6px rgba(255,119,203,.75)); }
.wire-path.active { animation: pulseWire .55s ease; }
@keyframes pulseWire {
  0%,100% { stroke-width: 3.5; }
  50% { stroke-width: 6.2; }
}

.empty-state {
  position: absolute;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--muted);
  pointer-events: none;
  z-index: 1;
}
.empty-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  border-radius: 20px;
  border: 3px dashed rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size: 1.4rem;
}
.empty-state h3 {
  color: white;
  font-size: 0.72rem;
  margin-bottom: 10px;
}
.empty-state p {
  max-width: 420px;
  line-height: 1.75;
  font-size: 0.56rem;
}

.node {
  position: absolute;
  width: 220px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(180deg, #666d82 0%, #4c5367 58%, #41485c 100%);
  box-shadow: 0 5px 0 #2d3241, 0 13px 26px rgba(0,0,0,0.36), inset 0 1px 0 rgba(255,255,255,0.12);
  color: white;
  z-index: 3;
  user-select: none;
}
.node::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border-top: 3px solid color-mix(in srgb, var(--node-color) 70%, white 8%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), inset 0 -12px 18px rgba(18,22,36,0.18);
  pointer-events: none;
}
.node::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: -7px; height: 7px;
  border-radius: 0 0 8px 8px;
  background: rgba(25,29,42,0.86);
  pointer-events: none;
}
.node.selected {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.10), 0 0 0 4px rgba(97,225,255,0.22), 0 10px 28px rgba(0,0,0,0.32);
}
.node.running { animation: nodeFlash .55s ease; }
@keyframes nodeFlash {
  50% { box-shadow: 0 0 20px color-mix(in srgb, var(--node-color) 68%, transparent), 0 0 0 2px rgba(255,255,255,0.08); }
}
.node.button-node {
  background: linear-gradient(180deg, #419949 0%, #2e7535 100%);
  border-color: rgba(121, 255, 146, 0.42);
}
.node.button-node .node-kind,
.node.button-node .node-summary { color: #edfff0; }
.node-header {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  align-items: center;
  gap: 7px;
  padding: 8px 9px 7px;
  cursor: move;
}
.node-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: rgba(255,255,255,0.10);
  color: white;
  font-size: 0.66rem;
}
.node-title-wrap { min-width: 0; }
.node-title {
  font-size: 0.56rem;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.node-kind {
  color: #d9e2f4;
  font-size: 0.42rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.node-delete {
  border: 0;
  background: transparent;
  color: #dfe6f4;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 6px;
  font-size: 0.7rem;
}
.node-delete:hover { background: rgba(255,255,255,0.08); }
.node-body { padding: 0 0 10px; }
.node-summary {
  color: #d7deea;
  font-size: 0.44rem;
  line-height: 1.55;
  padding: 0 10px 8px;
  min-height: 30px;
}
.port-row {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 12px;
  gap: 6px;
}
.port-row.input { justify-content: flex-start; padding-left: 15px; }
.port-row.output { justify-content: flex-end; padding-right: 15px; }
.port-label {
  font-size: 0.44rem;
  line-height: 1.35;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.port-type {
  font-size: 0.38rem;
  line-height: 1.2;
  color: #d7deea;
  letter-spacing: 0.06em;
}
.port {
  position: absolute;
  width: 17px;
  height: 10px;
  border: 1px solid rgba(255,255,255,0.24);
  box-shadow: 0 0 12px currentColor;
  cursor: crosshair;
}
.input-port { left: -10px; border-radius: 10px 3px 3px 10px; }
.output-port { right: -11px; clip-path: polygon(0 0, 78% 0, 100% 50%, 78% 100%, 0 100%); border-radius: 3px 10px 10px 3px; }
.port:hover { transform: scale(1.08); }
.port[data-type="exec"] { background: var(--orange); color: var(--orange); }
.port[data-type="number"] { background: var(--cyan); color: var(--cyan); }
.port[data-type="boolean"] { background: var(--lime); color: var(--lime); }
.port[data-type="text"] { background: var(--yellow); color: var(--yellow); }
.port[data-type="object"] { background: var(--purple); color: var(--purple); }
.port[data-type="player"] { background: var(--pink); color: var(--pink); }
.port.compatible { box-shadow: 0 0 0 4px rgba(255,255,255,0.10), 0 0 16px currentColor; }

.button-gadget-wrap {
  margin: 8px auto 0;
  width: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.button-gadget-line {
  width: 3px;
  height: 16px;
  border-left: 2px dashed rgba(255, 220, 84, .72);
}
.button-gadget {
  width: 124px;
  height: 86px;
  border-radius: 16px;
  border: 3px solid #0c5563;
  background: linear-gradient(180deg, #1f7888 0%, #114e58 100%);
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(5, 49, 56, .45), 0 10px 18px rgba(0,0,0,.22);
}
.button-gadget-face {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  border: 3px solid #149d1d;
  background: linear-gradient(180deg, #46ef3f 0%, #24bb1f 100%);
  color: white;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  line-height: 1.15;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.18);
}
.button-gadget:active .button-gadget-face,
.button-gadget.pressed .button-gadget-face {
  transform: translateY(2px) scale(.985);
  filter: brightness(.94);
}
.button-gadget-caption {
  color: #d6deea;
  font-size: 0.38rem;
  letter-spacing: 0.08em;
}

.inspector-section,
.output-section {
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.inspector,
.output-log {
  min-height: 0;
  overflow-y: auto;
  padding: 14px;
  border-radius: 18px;
  border: 2px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.empty-inspector {
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
  color: var(--muted);
}
.inspector-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  margin-bottom: 10px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255, 105, 211, 0.20), rgba(123, 103, 255, 0.20));
  border: 2px solid rgba(255,255,255,0.10);
}
.inspector h3 {
  font-size: 0.7rem;
  line-height: 1.45;
  margin-bottom: 10px;
}
.inspector .description {
  color: var(--muted);
  font-size: 0.5rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.inspector-tip {
  padding: 10px 12px;
  border-left: 3px solid rgba(97,225,255,0.70);
  background: rgba(97,225,255,0.08);
  border-radius: 10px;
  color: #d8fbff;
  font-size: 0.48rem;
  line-height: 1.7;
  margin-bottom: 12px;
}
.field {
  display: block;
  margin: 12px 0;
}
.field > span {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 0.48rem;
}
.port-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.legend-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 0.42rem;
}
.output-heading {
  align-items: flex-start;
}
.mini-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.text-button {
  border: 0;
  background: transparent;
  color: #b6c0ff;
  cursor: pointer;
  font-size: 0.5rem;
  padding: 6px;
}
.output-log {
  font-family: 'Cascadia Code', Consolas, monospace;
  font-size: 0.56rem;
  line-height: 1.7;
  background: rgba(6,8,18,0.62);
}
.log-line {
  padding: 7px 6px;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
  color: var(--text);
}
.log-line span {
  display: inline-block;
  min-width: 54px;
  font-weight: 900;
  font-size: 0.5rem;
  margin-right: 8px;
}
.log-line.info span { color: var(--cyan); }
.log-line.success span { color: var(--lime); }
.log-line.warn span { color: var(--yellow); }
.log-line.error span { color: var(--danger); }

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid rgba(255,255,255,0.10);
  background: rgba(12, 12, 22, 0.96);
  color: var(--text);
  box-shadow: var(--shadow);
  z-index: 70;
  font-size: 0.56rem;
  transition: .2s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(6,8,18,0.75);
  backdrop-filter: blur(8px);
}
.modal-backdrop.hidden { display: none; }
.modal-card {
  position: relative;
  width: min(560px, 100%);
  border-radius: 22px;
  border: 4px solid rgba(114, 71, 255, 0.35);
  background: rgba(12, 12, 22, 0.97);
  box-shadow: var(--shadow);
  padding: 24px;
}
.modal-card h2 {
  font-size: 0.86rem;
  margin: 12px 0 18px;
}
.modal-close {
  position: absolute;
  right: 14px;
  top: 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
}
.tutorial-badge {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 2px solid rgba(97,225,255,0.34);
  background: rgba(97,225,255,0.08);
  color: #d7fbff;
  font-size: 0.5rem;
}
.tutorial-steps {
  display: grid;
  gap: 12px;
}
.tutorial-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
}
.tutorial-step > span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255, 105, 211, 0.92), rgba(123, 103, 255, 0.92));
  border: 2px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 0.56rem;
}
.tutorial-step b {
  display: block;
  margin-bottom: 6px;
  font-size: 0.56rem;
  color: var(--text);
}
.tutorial-step p {
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.5rem;
}

@media (max-width: 1280px) {
  .layout { grid-template-columns: 280px minmax(360px,1fr) 310px; }
}
@media (max-width: 1120px) {
  .circuits-hero { grid-template-columns: 1fr; }
  .layout { grid-template-columns: 270px minmax(360px,1fr); }
  .right-panel { position: fixed; right: 12px; top: 164px; bottom: 18px; width: 320px; z-index: 61; }
  .right-panel.panel-hidden { display: none; }
}
@media (max-width: 820px) {
  body.circuits-page { overflow: auto; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .layout { display: block; }
  .left-panel, .workspace-panel, .right-panel {
    width: 100%;
    margin-bottom: 12px;
  }
  .left-panel { height: 420px; }
  .workspace-panel { height: 700px; }
  .right-panel {
    position: relative;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    min-height: 620px;
  }
  .nav-menu { width: 100%; }
}


.hero-circuit-demo {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  border-radius: 15px;
  border: 1px solid rgba(117, 98, 255, .22);
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 76, 43, .12), transparent 18%),
    radial-gradient(circle at 80% 70%, rgba(83, 174, 255, .10), transparent 22%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
    #05071b;
  background-size: auto, auto, 24px 24px, 24px 24px, auto;
  box-shadow: inset 0 0 34px rgba(76,54,189,.15);
}
.hero-demo-wires { position:absolute; inset:0; width:100%; height:100%; z-index:1; overflow:visible; }
.demo-wire { fill:none; stroke-width:4; stroke-linecap:round; }
.demo-wire.exec-wire { stroke:#ff6b3d; filter:drop-shadow(0 0 7px rgba(255,79,42,.95)); }
.demo-wire.player-wire { stroke:#ff75cd; filter:drop-shadow(0 0 6px rgba(255,117,205,.85)); }
.demo-wire.object-wire { stroke:#a88cff; filter:drop-shadow(0 0 6px rgba(168,140,255,.9)); }
.demo-chip {
  position:absolute; z-index:2; width:108px; min-height:52px; padding:8px 9px;
  border:1px solid rgba(255,255,255,.16); border-radius:7px;
  background:linear-gradient(180deg,#626a80,#42495d);
  box-shadow:0 4px 0 #292e3d,0 10px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.12);
}
.demo-chip span { display:block; color:#cbd3e9; font-size:.34rem; letter-spacing:.08em; margin-bottom:5px; }
.demo-chip b { display:block; color:white; font-size:.43rem; line-height:1.45; }
.demo-button-chip { left:5%; top:38px; border-top:3px solid #ff6f43; }
.demo-client-chip { left:45%; top:26px; border-top:3px solid #75bfff; }
.demo-action-chip { right:3%; top:26px; border-top:3px solid #9c79ff; }
.demo-server-chip { left:45%; top:124px; border-top:3px solid #75bfff; }
.demo-light-chip { right:3%; top:124px; border-top:3px solid #ffe06a; }
.demo-port { position:absolute; width:11px; height:8px; top:26px; border-radius:4px; box-shadow:0 0 10px currentColor; }
.demo-port.in { left:-7px; }
.demo-port.out { right:-7px; clip-path:polygon(0 0,75% 0,100% 50%,75% 100%,0 100%); }
.demo-port.second { top:39px; }
.demo-port.exec { color:#ff6f43; background:#ff6f43; }
.demo-port.player { color:#ff75cd; background:#ff75cd; }
.demo-port.object { color:#a88cff; background:#a88cff; }
.demo-physical-button {
  position:absolute; left:8%; top:116px; z-index:3; width:80px; height:72px;
  border:0; background:transparent; pointer-events:none;
}
.demo-physical-button::before { content:''; position:absolute; left:38px; top:-28px; height:31px; border-left:2px dashed rgba(255,111,67,.85); filter:drop-shadow(0 0 4px rgba(255,89,53,.8)); }
.demo-physical-button span {
  display:grid; place-items:center; width:68px; height:52px; margin:auto;
  border-radius:12px; color:#f3fff4; font-size:.44rem; line-height:1.35;
  background:linear-gradient(180deg,#46dd61,#168d35); border:3px solid #0d6828;
  box-shadow:0 9px 0 #0a5520,0 14px 22px rgba(0,0,0,.34),inset 0 3px 0 rgba(255,255,255,.18);
}

@media (max-width: 1120px) {
  .layout.inspector-compact, .layout.inspector-wide, .layout.inspector-hidden { grid-template-columns: 280px minmax(420px, 1fr); }
}
@media (max-width: 820px) {
  .hero-circuit-demo { min-height: 205px; }
  .demo-chip { transform:scale(.86); transform-origin:top left; }
  .demo-action-chip, .demo-light-chip { right:-1%; }
}

.circuits-page,
.circuits-page * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.circuits-page {
  --bg: #f6f6f8;
  --surface: #ffffff;
  --surface-strong: #ffffff;
  --border: #e4e1e9;
  --text: #2d2933;
  --muted: #827c89;
  --accent: #7744d8;
  --accent-strong: #8a5de4;
  --button-from: #7744d8;
  --button-to: #7744d8;
  --card-bg: #ffffff;
  --shadow: 0 10px 32px rgba(43,32,58,.07);
  min-height: 100vh;
  background: #f6f6f8;
  color: #2d2933;
}

.circuits-page::before,
.circuits-page::after {
  display: none;
}

.circuits-page .navbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 68px;
  background: rgba(255,255,255,.96);
  border: 0;
  border-bottom: 1px solid #e9e7ee;
  box-shadow: 0 1px 12px rgba(34,24,55,.05);
  backdrop-filter: blur(16px);
}

.circuits-page .navbar-container {
  width: min(1380px, calc(100% - 40px));
  max-width: none;
  min-height: 68px;
  margin: 0 auto;
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.circuits-page .navbar-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.circuits-page .navbar-logo .logo-image {
  display: block;
  width: auto;
  height: 38px;
  max-height: 38px;
  object-fit: contain;
}

.circuits-page .nav-menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.circuits-page .nav-menu::-webkit-scrollbar { display: none; }

.circuits-page .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #6f6a78;
  font-size: 13px;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}

.circuits-page .nav-link:hover,
.circuits-page .nav-link.active {
  color: #6f37db;
  background: #f3effb;
  border: 0;
  text-decoration: none;
}

.circuits-page .nav-auth,
.circuits-page .nav-user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.circuits-page .btn-login,
.circuits-page .btn-signup,
.circuits-page .btn-profile,
.circuits-page .btn-logout,
.circuits-page .user-greeting {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.circuits-page .btn-login {
  border: 1px solid #d8cfeb;
  color: #6f37db;
  background: #fff;
}

.circuits-page .btn-signup {
  border: 1px solid #7142d8;
  color: #fff;
  background: #7544dc;
}

.circuits-hero {
  width: min(1380px, calc(100% - 40px));
  margin: 28px auto 0;
  padding: 32px 34px;
  border: 1px solid #e4dff0;
  border-radius: 25px;
  background: linear-gradient(135deg, #fff 0%, #faf8ff 72%, #f1eaff 100%);
  box-shadow: var(--shadow);
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
}

.circuits-hero::after { display: none; }

.hero-kicker {
  padding: 6px 9px;
  margin-bottom: 12px;
  border: 0;
  border-radius: 7px;
  background: #f0eafa;
  color: #7444d3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.circuits-hero h1 {
  margin-bottom: 12px;
  color: #2b2631;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
  letter-spacing: -.045em;
}

.circuits-hero p {
  max-width: 720px;
  color: #77717f;
  font-size: 14px;
  line-height: 1.65;
}

.hero-badges {
  gap: 7px;
  margin-top: 16px;
}

.hero-badges span {
  padding: 7px 9px;
  border: 1px solid #e6e1ed;
  border-radius: 8px;
  background: #fff;
  color: #716b78;
  font-size: 11px;
}

.hero-preview-card {
  border: 1px solid #e5dfed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(45,33,61,.06);
}

.preview-chip-title {
  color: #7a4bd3;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
}

.app-shell {
  width: min(1380px, calc(100% - 40px));
  margin: 0 auto;
  padding: 14px 0 50px;
}

.app-shell .topbar {
  min-height: 76px;
  margin: 0 0 12px;
  padding: 14px 16px;
  border: 1px solid #e3e0e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.brand-mark {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 13px;
  background: #7544d7;
  box-shadow: none;
  color: #fff;
  font-size: 13px;
}

.brand h1 {
  margin: 0 0 4px;
  color: #302b36;
  font-size: 15px;
  letter-spacing: -.01em;
}

.brand p {
  color: #88818f;
  font-size: 11px;
  line-height: 1.45;
}

.top-actions {
  gap: 6px;
}

.button,
.icon-button,
.text-button,
.inspector-dock-button {
  margin: 0;
  border: 1px solid #ddd9e3;
  border-radius: 9px;
  background: #fff;
  color: #605968;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.button,
.icon-button {
  padding: 9px 11px;
}

.button.primary {
  border-color: #7544d7;
  background: #7544d7;
  color: #fff;
  box-shadow: none;
}

.button.secondary {
  background: #fff;
  color: #605968;
}

.button.danger {
  border-color: #f0cfd4;
  background: #fff5f6;
  color: #bc4d5d;
}

.button:hover,
.icon-button:hover,
.text-button:hover {
  transform: none;
  filter: none;
  background: #f7f4fb;
  border-color: #cfc5df;
}

.button.primary:hover {
  background: #6937cf;
  border-color: #6937cf;
}

.layout,
.layout.inspector-compact,
.layout.inspector-wide {
  grid-template-columns: 290px minmax(420px, 1fr) 320px;
  gap: 12px;
  margin-top: 0;
  min-height: 690px;
}

.layout.inspector-hidden {
  grid-template-columns: 290px minmax(420px, 1fr);
}

.sidebar,
.workspace-panel {
  border: 1px solid #e3e0e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.left-panel,
.right-panel {
  padding: 14px;
}

.panel-heading h2 {
  margin: 0 0 5px;
  color: #312c37;
  font-size: 14px;
  letter-spacing: -.01em;
}

.panel-heading p,
.workspace-help span,
.output-heading p {
  color: #918a97;
  font-size: 11px;
  line-height: 1.45;
}

.count-pill {
  min-width: 34px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #f0eafa;
  color: #7242d2;
  font-size: 11px;
}

.search-wrap {
  margin: 14px 0 10px;
}

.search-wrap span {
  color: #8e8794;
  font-size: 10px;
}

.search-wrap input,
.field input,
.field select {
  padding: 10px 11px;
  border: 1px solid #ddd9e3;
  border-radius: 9px;
  background: #faf9fb;
  color: #38323e;
  font-size: 11px;
}

.search-wrap input:focus,
.field input:focus,
.field select:focus {
  border-color: #9a79d7;
  box-shadow: 0 0 0 3px rgba(119,68,216,.08);
}

.category-tabs {
  gap: 5px;
  padding-bottom: 8px;
}

.category-tab {
  padding: 7px 9px;
  border: 1px solid #e1dde6;
  border-radius: 8px;
  background: #fff;
  color: #77707e;
  font-size: 10px;
}

.category-tab.active {
  border-color: #cbbce7;
  background: #f1ecfa;
  color: #6f3fd0;
}

.palette-section-title {
  margin: 14px 0 8px;
  color: #9a939f;
  font-size: 9px;
}

.palette-chip {
  grid-template-columns: 32px 1fr auto;
  gap: 9px;
  padding: 10px;
  margin-bottom: 7px;
  border: 1px solid #e4e1e7;
  border-left: 4px solid var(--chip-color);
  border-radius: 10px;
  background: #fbfbfc;
  color: #37323d;
  box-shadow: none;
}

.palette-chip:hover {
  transform: none;
  border-color: #cdc4d9;
  border-left-color: var(--chip-color);
  background: #f8f6fa;
}

.palette-icon {
  width: 28px;
  height: 28px;
  border: 1px solid #e7e2eb;
  border-radius: 8px;
  background: #fff;
  color: #615968;
  font-size: 11px;
}

.palette-category {
  color: #947aad;
  font-size: 8px;
}

.palette-chip strong {
  color: #3d3742;
  font-size: 11px;
}

.palette-chip small {
  color: #948d99;
  font-size: 9px;
}

.workspace-toolbar {
  border-bottom: 1px solid #e6e2ea;
  background: #fff;
}

.workspace-help strong {
  color: #332e39;
  font-size: 13px;
}

.workspace-viewport {
  background: #17151c;
}

.workspace,
.grid-background {
  background-color: #17151c;
}

.grid-background {
  opacity: .42;
}

.empty-state {
  color: #c7c0cf;
}

.empty-state h3 {
  color: #f0edf3;
  font-size: 15px;
}

.empty-state p {
  color: #a9a2b0;
  font-size: 11px;
}

.inspector-section,
.output-section {
  background: #fff;
}

.output-log,
.inspector {
  border-color: #e5e1e9;
  background: #faf9fb;
  color: #4f4856;
}

.modal-backdrop {
  background: rgba(23,19,28,.48);
}

.modal-card {
  border: 1px solid #ded9e5;
  background: #fff;
  color: #332d39;
  box-shadow: 0 24px 70px rgba(24,17,32,.2);
}

.modal-card h2 {
  color: #302a36;
}

.tutorial-badge {
  color: #7544d7;
}

.tutorial-step {
  background: #faf8fc;
  border-color: #e9e4ef;
}

.tutorial-step b {
  color: #3d3743;
}

.tutorial-step p {
  color: #89828f;
}

.inspector-dock-button {
  right: 18px;
  bottom: 18px;
  padding: 10px 12px;
  border-color: #7544d7;
  background: #7544d7;
  color: #fff;
}

@media (max-width: 1120px) {
  .circuits-page .navbar-container {
    flex-wrap: wrap;
    gap: 8px 14px;
  }

  .circuits-page .nav-menu {
    order: 3;
    flex-basis: 100%;
  }

  .circuits-hero {
    grid-template-columns: 1fr;
  }

  .hero-panel {
    display: none;
  }

  .layout,
  .layout.inspector-compact,
  .layout.inspector-wide {
    grid-template-columns: 260px minmax(400px, 1fr);
  }

  .right-panel {
    display: none;
  }

  .layout.inspector-hidden {
    grid-template-columns: 260px minmax(400px, 1fr);
  }
}

@media (max-width: 760px) {
  .circuits-page .navbar-container,
  .circuits-hero,
  .app-shell {
    width: min(100% - 24px, 1380px);
  }

  .circuits-page .navbar-logo .logo-image {
    height: 32px;
  }

  .circuits-hero {
    padding: 24px 20px;
  }

  .app-shell .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .layout,
  .layout.inspector-compact,
  .layout.inspector-wide,
  .layout.inspector-hidden {
    display: block;
    min-height: 0;
  }

  .left-panel {
    margin-bottom: 12px;
  }

  .workspace-panel {
    min-height: 620px;
  }
}

.mobile-circuit-tip,
.mobile-workspace-hint {
  display: none;
}

.node-header,
.port,
.button-gadget {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 760px), (pointer: coarse) {
  body.circuits-page {
    overflow-x: hidden;
  }

  .circuits-page .navbar {
    position: relative;
    top: auto;
    margin: 8px 8px 0;
    border-radius: 14px;
  }

  .circuits-page .navbar-container {
    width: 100%;
    padding: 10px;
    gap: 8px;
  }

  .circuits-page .nav-menu {
    order: 3;
    width: 100%;
    flex-basis: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0 5px;
    gap: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .circuits-page .nav-menu::-webkit-scrollbar {
    display: none;
  }

  .circuits-page .nav-link {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 10px;
    font-size: 11px;
  }

  .circuits-page .nav-auth,
  .circuits-page .nav-user-profile {
    gap: 5px;
  }

  .circuits-page .btn-login,
  .circuits-page .btn-signup,
  .circuits-page .btn-profile,
  .circuits-page .btn-logout,
  .circuits-page .user-greeting {
    padding: 8px 10px;
    font-size: 11px;
  }

  .circuits-hero,
  .app-shell {
    width: calc(100% - 16px);
    margin-left: 8px;
    margin-right: 8px;
  }

  .circuits-hero {
    margin-top: 8px;
    padding: 18px 16px;
    border-radius: 16px;
  }

  .circuits-hero h1 {
    font-size: 28px;
    margin-bottom: 8px;
  }

  .circuits-hero p {
    font-size: 13px;
    line-height: 1.55;
  }

  .hero-kicker {
    font-size: 10px;
    padding: 6px 9px;
  }

  .hero-badges {
    gap: 6px;
    margin-top: 12px;
  }

  .hero-badges span {
    padding: 7px 9px;
    font-size: 10px;
  }

  .app-shell {
    padding: 0;
  }

  .app-shell .topbar {
    margin-top: 8px;
    padding: 14px;
    gap: 12px;
    border-radius: 16px;
  }

  .brand {
    gap: 10px;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    flex: 0 0 auto;
  }

  .brand h1 {
    font-size: 16px;
    margin-bottom: 4px;
  }

  .brand p {
    font-size: 11px;
    line-height: 1.45;
  }

  .top-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .top-actions .button {
    width: 100%;
    min-height: 42px;
    padding: 9px 8px;
    font-size: 11px;
  }

  #inspectorSizeBtn {
    display: none;
  }

  .layout,
  .layout.inspector-compact,
  .layout.inspector-wide,
  .layout.inspector-hidden {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .left-panel {
    width: 100%;
    height: 390px;
    margin: 0;
    padding: 12px;
    border-radius: 14px;
  }

  .panel-heading h2 {
    font-size: 15px;
  }

  .panel-heading p {
    font-size: 11px;
  }

  .mobile-circuit-tip {
    display: block;
    margin-top: 6px;
    color: #7242d2 !important;
    font-size: 11px !important;
    font-weight: 600;
  }

  .search-wrap {
    margin: 11px 0 8px;
  }

  .search-wrap input {
    min-height: 42px;
    font-size: 16px;
  }

  .category-tabs {
    margin-inline: -2px;
    padding: 2px 2px 8px;
    gap: 6px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .category-tabs::-webkit-scrollbar {
    display: none;
  }

  .category-tab {
    min-height: 38px;
    padding: 8px 11px;
    font-size: 11px;
  }

  .palette {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .palette-chip {
    min-height: 62px;
    grid-template-columns: 36px 1fr 32px;
    padding: 10px;
    touch-action: manipulation;
  }

  .palette-icon {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }

  .palette-chip strong {
    font-size: 12px;
  }

  .palette-chip small,
  .palette-category {
    font-size: 9px;
  }

  .drag-symbol {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f0eafa;
    color: #7242d2;
    font-size: 20px;
  }

  .workspace-panel {
    width: 100%;
    height: 68dvh;
    min-height: 540px;
    max-height: 760px;
    margin: 0;
    border-radius: 14px;
  }

  .workspace-toolbar {
    min-height: auto;
    align-items: flex-start;
    padding: 10px 11px;
    gap: 8px;
  }

  .workspace-help {
    min-width: 0;
  }

  .workspace-help strong {
    font-size: 13px;
    margin-bottom: 3px;
  }

  .workspace-help > span:not(.mobile-workspace-hint) {
    display: none;
  }

  .mobile-workspace-hint {
    display: block;
    max-width: 230px;
    color: #77707e;
    font-size: 10px;
    line-height: 1.4;
  }

  .zoom-controls {
    flex: 0 0 auto;
    gap: 5px;
  }

  .zoom-controls .icon-button {
    width: 40px;
    height: 40px;
    font-size: 20px;
    touch-action: manipulation;
  }

  #zoomLabel {
    min-width: 42px;
    text-align: center;
    font-size: 10px;
  }

  .workspace-viewport {
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
  }

  .workspace {
    width: 1600px;
    height: 1100px;
  }

  .node {
    width: 230px;
  }

  .node-header {
    min-height: 48px;
    padding: 9px 10px;
    cursor: grab;
    touch-action: none;
  }

  .node-header:active {
    cursor: grabbing;
  }

  .node-delete {
    width: 36px;
    height: 36px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 20px;
    touch-action: manipulation;
  }

  .node-title {
    font-size: 12px;
  }

  .node-kind {
    font-size: 9px;
  }

  .node-summary {
    font-size: 10px;
    line-height: 1.45;
  }

  .port-row {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .port-label {
    font-size: 10px;
  }

  .port-type {
    font-size: 8px;
  }

  .port {
    width: 30px;
    height: 24px;
    border-width: 2px;
    touch-action: none;
    cursor: pointer;
  }

  .input-port {
    left: -16px;
  }

  .output-port {
    right: -17px;
  }

  .port.compatible {
    transform: scale(1.12);
    box-shadow: 0 0 0 5px rgba(255,255,255,.18), 0 0 18px currentColor;
  }

  .button-gadget {
    min-width: 132px;
    min-height: 92px;
    touch-action: manipulation;
  }

  .empty-state {
    left: 290px;
    top: 220px;
    transform: none;
    width: 260px;
    text-align: left;
  }

  .empty-state h3 {
    font-size: 15px;
  }

  .empty-state p {
    font-size: 11px;
  }

  .right-panel,
  .right-panel.panel-compact,
  .right-panel.panel-wide {
    position: fixed;
    left: 8px;
    right: 8px;
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(72dvh, 650px);
    min-height: 0;
    padding: 12px;
    display: grid;
    grid-template-rows: minmax(190px, auto) minmax(160px, 1fr);
    gap: 10px;
    z-index: 110;
    border-radius: 16px;
    box-shadow: 0 18px 55px rgba(23, 18, 30, .28);
    overflow: auto;
  }

  .right-panel.panel-hidden {
    display: none;
  }

  .inspector,
  .output-log {
    max-height: 260px;
    -webkit-overflow-scrolling: touch;
  }

  .field input,
  .field select {
    min-height: 42px;
    font-size: 16px;
  }

  .inspector-dock-button {
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    min-height: 44px;
    padding: 10px 14px;
    z-index: 105;
    font-size: 12px;
    border-radius: 12px;
  }

  .modal-card {
    width: calc(100% - 20px);
    max-height: 88dvh;
    overflow-y: auto;
    padding: 18px;
    -webkit-overflow-scrolling: touch;
  }

  .tutorial-step {
    grid-template-columns: 32px 1fr;
    gap: 9px;
  }

  .toast {
    left: 10px;
    right: 10px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    transform: translateY(18px);
    max-width: none;
    text-align: center;
  }

  .toast.show {
    transform: translateY(0);
  }
}

.rz-circuits-v3 .circuits-hero-compact{max-width:1380px;margin:0 auto;padding:28px 28px 10px;display:block;background:none;border:0;min-height:0}
.rz-circuits-v3 .circuits-hero-compact .hero-copy{max-width:760px}
.rz-circuits-v3 .circuits-hero-compact h1{margin:4px 0 5px;font-size:clamp(30px,5vw,48px);line-height:1;letter-spacing:-.04em}
.rz-circuits-v3 .circuits-hero-compact p{margin:0;color:#77717e;font-size:14px;line-height:1.55}
@media(max-width:700px){.rz-circuits-v3 .circuits-hero-compact{padding:20px 14px 6px}.rz-circuits-v3 .circuits-hero-compact p{font-size:12px}}

body.circuits-page{--ui-bg:#f4f3f7;--ui-card:#ffffff;--ui-card-soft:#faf9fc;--ui-line:#e3dfe8;--ui-text:#2c2831;--ui-muted:#7f7885;--ui-purple:#7443d7;--ui-purple-soft:#f0eafb;--ui-shadow:0 12px 34px rgba(42,30,55,.07);background:var(--ui-bg);color:var(--ui-text)}
html.rz-dark-preload body.circuits-page,body.circuits-page.dark-mode{--ui-bg:#101013;--ui-card:#1a181d;--ui-card-soft:#151317;--ui-line:#2e2a33;--ui-text:#f2eef5;--ui-muted:#aaa3b0;--ui-purple:#a77bea;--ui-purple-soft:#2b2238;--ui-shadow:0 16px 42px rgba(0,0,0,.24);background:#101013;color:var(--ui-text)}
.circuits-page .navbar{background:rgba(255,255,255,.94);border-bottom:1px solid var(--ui-line);box-shadow:0 1px 10px rgba(37,27,48,.04)}
html.rz-dark-preload body.circuits-page .navbar,body.circuits-page.dark-mode .navbar{background:rgba(24,22,27,.94);border-bottom-color:#302b35;box-shadow:0 1px 16px rgba(0,0,0,.2)}
.circuits-page .nav-link{color:#706a76}
.circuits-page .nav-link:hover,.circuits-page .nav-link.active{background:var(--ui-purple-soft);color:var(--ui-purple)}
html.rz-dark-preload body.circuits-page .nav-link,body.circuits-page.dark-mode .nav-link{color:#b5aeb9}
html.rz-dark-preload body.circuits-page .btn-login,html.rz-dark-preload body.circuits-page .btn-profile,html.rz-dark-preload body.circuits-page .btn-logout,html.rz-dark-preload body.circuits-page .user-greeting,body.circuits-page.dark-mode .btn-login,body.circuits-page.dark-mode .btn-profile,body.circuits-page.dark-mode .btn-logout,body.circuits-page.dark-mode .user-greeting{border-color:#3b3541;background:#1d1b20;color:#ddd7e2}
.rz-circuits-v3 .circuits-hero-compact{width:min(1380px,calc(100% - 40px));max-width:none;margin:24px auto 12px;padding:30px 32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,520px);align-items:end;gap:30px;border:1px solid #e2dcea;border-radius:24px;background:linear-gradient(135deg,#ffffff 0%,#fbf9ff 64%,#f1eafe 100%);box-shadow:var(--ui-shadow)}
.rz-circuits-v3 .circuits-hero-compact .hero-copy{max-width:760px}
.rz-circuits-v3 .circuits-hero-compact h1{margin:5px 0 9px;color:var(--ui-text);font-size:clamp(34px,5vw,56px);line-height:.98;letter-spacing:-.05em}
.rz-circuits-v3 .circuits-hero-compact p{max-width:680px;margin:0;color:var(--ui-muted);font-size:14px;line-height:1.65}
.rz-circuits-v3 .hero-quick-guide{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rz-circuits-v3 .hero-quick-guide>div{min-width:0;padding:13px;border:1px solid #e5e0eb;border-radius:13px;background:rgba(255,255,255,.72)}
.rz-circuits-v3 .hero-quick-guide strong{display:block;margin-bottom:14px;color:#9c83c9;font-size:10px}
.rz-circuits-v3 .hero-quick-guide span{display:block;margin-bottom:3px;color:#332e39;font-size:12px;font-weight:800}
.rz-circuits-v3 .hero-quick-guide small{display:block;color:#918a97;font-size:10px;line-height:1.35}
html.rz-dark-preload body.circuits-page .circuits-hero-compact,body.circuits-page.dark-mode .circuits-hero-compact{border-color:#332d39;background:linear-gradient(135deg,#1a181e 0%,#17151b 65%,#20182b 100%);box-shadow:var(--ui-shadow)}
html.rz-dark-preload body.circuits-page .hero-quick-guide>div,body.circuits-page.dark-mode .hero-quick-guide>div{border-color:#36303c;background:#151318}
html.rz-dark-preload body.circuits-page .hero-quick-guide span,body.circuits-page.dark-mode .hero-quick-guide span{color:#eee9f2}
html.rz-dark-preload body.circuits-page .hero-quick-guide small,body.circuits-page.dark-mode .hero-quick-guide small{color:#99919f}
.circuits-page .app-shell{padding-top:0}
.circuits-page .app-shell .topbar,.circuits-page .sidebar,.circuits-page .workspace-panel{border:1px solid var(--ui-line);background:var(--ui-card);box-shadow:var(--ui-shadow)}
html.rz-dark-preload body.circuits-page .app-shell .topbar,html.rz-dark-preload body.circuits-page .sidebar,html.rz-dark-preload body.circuits-page .workspace-panel,body.circuits-page.dark-mode .app-shell .topbar,body.circuits-page.dark-mode .sidebar,body.circuits-page.dark-mode .workspace-panel{border-color:var(--ui-line);background:var(--ui-card)}
.circuits-page .brand-mark{display:grid;place-items:center;border-radius:14px;background:#7443d7;color:#fff;font-size:18px;font-weight:900}
.circuits-page .brand h1,.circuits-page .panel-heading h2,.circuits-page .workspace-help strong{color:var(--ui-text)}
.circuits-page .brand p,.circuits-page .panel-heading p,.circuits-page .workspace-help span,.circuits-page .output-heading p,.circuits-page .search-wrap span{color:var(--ui-muted)}
.circuits-page .button,.circuits-page .icon-button,.circuits-page .text-button{border-color:var(--ui-line);background:var(--ui-card-soft);color:#625b69}
html.rz-dark-preload body.circuits-page .button,html.rz-dark-preload body.circuits-page .icon-button,html.rz-dark-preload body.circuits-page .text-button,body.circuits-page.dark-mode .button,body.circuits-page.dark-mode .icon-button,body.circuits-page.dark-mode .text-button{border-color:#3a3440;background:#211e24;color:#d1cad6}
.circuits-page .button:hover,.circuits-page .icon-button:hover,.circuits-page .text-button:hover{background:var(--ui-purple-soft);border-color:#cdbde8;color:var(--ui-purple)}
html.rz-dark-preload body.circuits-page .button:hover,html.rz-dark-preload body.circuits-page .icon-button:hover,html.rz-dark-preload body.circuits-page .text-button:hover,body.circuits-page.dark-mode .button:hover,body.circuits-page.dark-mode .icon-button:hover,body.circuits-page.dark-mode .text-button:hover{background:#2b2434;border-color:#51425f;color:#c3a3ff}
.circuits-page .button.primary{border-color:#7443d7;background:#7443d7;color:#fff}
.circuits-page .button.danger{border-color:#efd2d7;background:#fff5f6;color:#b94d5b}
html.rz-dark-preload body.circuits-page .button.danger,body.circuits-page.dark-mode .button.danger{border-color:#5a3138;background:#2b1d20;color:#f0a1ad}
.circuits-page .count-pill{background:var(--ui-purple-soft);color:var(--ui-purple)}
.circuits-page .search-wrap input,.circuits-page .field input,.circuits-page .field select{border-color:var(--ui-line);background:var(--ui-card-soft);color:var(--ui-text)}
html.rz-dark-preload body.circuits-page .search-wrap input,html.rz-dark-preload body.circuits-page .field input,html.rz-dark-preload body.circuits-page .field select,body.circuits-page.dark-mode .search-wrap input,body.circuits-page.dark-mode .field input,body.circuits-page.dark-mode .field select{color-scheme:dark}
.circuits-page .category-tab{border-color:var(--ui-line);background:var(--ui-card);color:var(--ui-muted)}
.circuits-page .category-tab.active{border-color:#cfbde9;background:var(--ui-purple-soft);color:var(--ui-purple)}
.circuits-page .palette-section-title{color:var(--ui-muted)}
.circuits-page .palette-chip{border-color:var(--ui-line);border-left-color:var(--chip-color);background:var(--ui-card-soft);color:var(--ui-text)}
.circuits-page .palette-chip:hover{border-color:#cfc5da;border-left-color:var(--chip-color);background:#f6f3f9}
html.rz-dark-preload body.circuits-page .palette-chip:hover,body.circuits-page.dark-mode .palette-chip:hover{border-color:#4b424f;border-left-color:var(--chip-color);background:#211e24}
.circuits-page .palette-icon{border-color:var(--ui-line);background:var(--ui-card);color:var(--ui-text)}
.circuits-page .palette-chip strong{color:var(--ui-text)}
.circuits-page .palette-chip small{color:var(--ui-muted)}
.circuits-page .workspace-toolbar{border-bottom-color:var(--ui-line);background:var(--ui-card)}
.circuits-page .workspace-viewport{background:#151319}
.circuits-page .workspace,.circuits-page .grid-background{background-color:#151319}
html.rz-dark-preload body.circuits-page .workspace-viewport,html.rz-dark-preload body.circuits-page .workspace,html.rz-dark-preload body.circuits-page .grid-background,body.circuits-page.dark-mode .workspace-viewport,body.circuits-page.dark-mode .workspace,body.circuits-page.dark-mode .grid-background{background-color:#0b0a0d}
.circuits-page .right-panel{background:var(--ui-card)}
.circuits-page .inspector-section,.circuits-page .output-section{background:transparent}
.circuits-page .inspector,.circuits-page .output-log{border:1px solid var(--ui-line);background:var(--ui-card-soft);color:var(--ui-text)}
html.rz-dark-preload body.circuits-page .output-log,body.circuits-page.dark-mode .output-log{background:#111014}
.circuits-page .inspector .description,.circuits-page .field>span{color:var(--ui-muted)}
.circuits-page .inspector-tip{border-left-color:#8b63dd;background:var(--ui-purple-soft);color:#675476}
html.rz-dark-preload body.circuits-page .inspector-tip,body.circuits-page.dark-mode .inspector-tip{color:#c7b7d4}
.circuits-page .legend-pill{border-color:var(--ui-line);background:var(--ui-card-soft);color:var(--ui-muted)}
.circuits-page .modal-card{border:1px solid var(--ui-line);background:var(--ui-card);color:var(--ui-text);box-shadow:0 26px 80px rgba(20,13,28,.28)}
.circuits-page .modal-card h2,.circuits-page .tutorial-step b{color:var(--ui-text)}
.circuits-page .tutorial-step{border:1px solid var(--ui-line);background:var(--ui-card-soft)}
.circuits-page .tutorial-step p{color:var(--ui-muted)}
.circuits-page .tutorial-badge{color:var(--ui-purple)}
.circuits-page .node{border-color:rgba(255,255,255,.13);background:linear-gradient(180deg,#575d70,#424757);box-shadow:0 4px 0 #303441,0 12px 24px rgba(0,0,0,.3)}
.circuits-page .node.selected{box-shadow:0 0 0 2px rgba(255,255,255,.08),0 0 0 4px rgba(146,101,230,.45),0 12px 28px rgba(0,0,0,.34)}
.circuits-page .toast{border:1px solid #3c3543;background:#1a181d;color:#f1edf4}
@media(max-width:900px){.rz-circuits-v3 .circuits-hero-compact{grid-template-columns:1fr}.rz-circuits-v3 .hero-quick-guide{max-width:620px}}
@media(max-width:700px){.rz-circuits-v3 .circuits-hero-compact{width:calc(100% - 16px);margin:14px 8px 8px;padding:20px 16px;border-radius:18px}.rz-circuits-v3 .circuits-hero-compact h1{font-size:34px}.rz-circuits-v3 .hero-quick-guide{grid-template-columns:1fr}.rz-circuits-v3 .hero-quick-guide>div{display:grid;grid-template-columns:32px 52px 1fr;align-items:center;gap:6px;padding:10px}.rz-circuits-v3 .hero-quick-guide strong{margin:0}.rz-circuits-v3 .hero-quick-guide span{margin:0}}

body.rz-circuits-v4{
  --cv-page:#f3f3f5;
  --cv-panel:#ffffff;
  --cv-panel-2:#f7f7f8;
  --cv-board:#e9eaed;
  --cv-board-line:rgba(55,51,61,.09);
  --cv-text:#242229;
  --cv-muted:#77717c;
  --cv-line:#dedce2;
  --cv-line-strong:#cac6d0;
  --cv-accent:#7144d8;
  --cv-accent-soft:#eee9fa;
  --cv-danger:#b94c58;
  --cv-node:#373a41;
  --cv-node-2:#2e3036;
  --cv-node-line:#4c4f58;
  --cv-node-text:#f4f4f6;
  --cv-node-muted:#b9bbc2;
  --cv-shadow:0 8px 24px rgba(28,23,35,.08);
  margin:0;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  background:var(--cv-page);
  color:var(--cv-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:auto;
}
body.rz-circuits-v4 *,body.rz-circuits-v4 *::before,body.rz-circuits-v4 *::after{font-family:inherit;box-sizing:border-box}
body.rz-circuits-v4::before,body.rz-circuits-v4::after{display:none!important}
html.rz-dark-preload body.rz-circuits-v4,body.rz-circuits-v4.dark-mode{
  --cv-page:#111115;
  --cv-panel:#19191e;
  --cv-panel-2:#151519;
  --cv-board:#101115;
  --cv-board-line:rgba(255,255,255,.055);
  --cv-text:#efedf2;
  --cv-muted:#9e99a4;
  --cv-line:#2b2a31;
  --cv-line-strong:#3a3841;
  --cv-accent:#a67bea;
  --cv-accent-soft:#2b2238;
  --cv-danger:#df7b86;
  --cv-node:#2b2d33;
  --cv-node-2:#25272c;
  --cv-node-line:#44464f;
  --cv-node-text:#f5f5f7;
  --cv-node-muted:#aaaab2;
  --cv-shadow:0 9px 28px rgba(0,0,0,.22);
  color-scheme:dark;
}
body.rz-circuits-v4 .navbar{
  position:relative;
  top:auto;
  z-index:60;
  height:64px;
  min-height:64px;
  margin:0;
  border:0;
  border-bottom:1px solid var(--cv-line);
  border-radius:0;
  background:rgba(255,255,255,.96);
  box-shadow:none;
  backdrop-filter:blur(14px);
}
html.rz-dark-preload body.rz-circuits-v4 .navbar,body.rz-circuits-v4.dark-mode .navbar{background:rgba(25,25,30,.96)}
body.rz-circuits-v4 .navbar-container{width:min(1320px,calc(100% - 28px));height:64px;min-height:64px;margin:0 auto;padding:0;gap:14px;flex-wrap:nowrap}
body.rz-circuits-v4 .navbar-logo{flex:0 0 auto}
body.rz-circuits-v4 .logo-image{height:35px;max-height:35px}
body.rz-circuits-v4 .nav-menu{display:flex;flex:1 1 auto;flex-wrap:nowrap;gap:2px;overflow-x:auto;scrollbar-width:none}
body.rz-circuits-v4 .nav-menu::-webkit-scrollbar{display:none}
body.rz-circuits-v4 .nav-link{height:34px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:#6d6872;font-size:12px;font-weight:650;white-space:nowrap}
body.rz-circuits-v4 .nav-link:hover,body.rz-circuits-v4 .nav-link.active{background:var(--cv-accent-soft);color:var(--cv-accent)}
html.rz-dark-preload body.rz-circuits-v4 .nav-link,body.rz-circuits-v4.dark-mode .nav-link{color:#aaa6af}
body.rz-circuits-v4 .nav-auth,body.rz-circuits-v4 .nav-user-profile{flex:0 0 auto;flex-wrap:nowrap}
body.rz-circuits-v4 .btn-login,body.rz-circuits-v4 .btn-signup,body.rz-circuits-v4 .btn-profile,body.rz-circuits-v4 .btn-logout,body.rz-circuits-v4 .user-greeting{min-height:34px;padding:0 11px;border-radius:8px;font-size:11px;font-weight:700}
body.rz-circuits-v4 .btn-login,body.rz-circuits-v4 .btn-profile,body.rz-circuits-v4 .user-greeting{border:1px solid var(--cv-line);background:var(--cv-panel);color:var(--cv-text)}
body.rz-circuits-v4 .btn-signup{border:1px solid var(--cv-accent);background:var(--cv-accent);color:#fff}
body.rz-circuits-v4 .btn-logout{border:1px solid transparent;background:transparent;color:var(--cv-danger)}
body.rz-circuits-v4 .app-shell{height:calc(100dvh - 64px);padding:0;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden;background:var(--cv-page)}
body.rz-circuits-v4 .topbar{min-height:74px;margin:0;padding:12px 16px;border:0;border-bottom:1px solid var(--cv-line);border-radius:0;background:var(--cv-panel);box-shadow:none}
body.rz-circuits-v4 .brand{gap:11px;min-width:260px}
body.rz-circuits-v4 .brand-mark{width:38px;height:38px;border:1px solid var(--cv-line-strong);border-radius:9px;background:var(--cv-panel-2);box-shadow:none;color:var(--cv-accent);font-size:12px;font-weight:800}
body.rz-circuits-v4 .brand-line{display:flex;align-items:center;gap:8px}
body.rz-circuits-v4 .brand h1{margin:0;font-size:15px;line-height:1.2;color:var(--cv-text);letter-spacing:-.01em}
body.rz-circuits-v4 .brand p{margin:4px 0 0;color:var(--cv-muted);font-size:11px;line-height:1.4;max-width:510px}
body.rz-circuits-v4 .editor-state{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--cv-accent-soft);color:var(--cv-accent);font-size:9px;font-weight:800}
body.rz-circuits-v4 .top-actions{gap:6px;flex-wrap:wrap}
body.rz-circuits-v4 .button,body.rz-circuits-v4 .icon-button{min-height:34px;padding:0 11px;border:1px solid var(--cv-line-strong);border-radius:8px;background:var(--cv-panel);box-shadow:none;color:var(--cv-text);font-size:11px;font-weight:700;transition:background .12s ease,border-color .12s ease,transform .12s ease}
body.rz-circuits-v4 .button:hover,body.rz-circuits-v4 .icon-button:hover{transform:none;filter:none;background:var(--cv-panel-2);border-color:var(--cv-line-strong)}
body.rz-circuits-v4 .button:active,body.rz-circuits-v4 .icon-button:active{transform:translateY(1px)}
body.rz-circuits-v4 .button.primary{border-color:var(--cv-accent);background:var(--cv-accent);color:#fff;box-shadow:none}
body.rz-circuits-v4 .button.primary:hover{filter:brightness(.96)}
body.rz-circuits-v4 .button.secondary{background:var(--cv-panel);color:var(--cv-text)}
body.rz-circuits-v4 .button.save-button{border-color:color-mix(in srgb,var(--cv-accent) 42%,var(--cv-line));color:var(--cv-accent)}
body.rz-circuits-v4 .button.danger{border-color:color-mix(in srgb,var(--cv-danger) 34%,var(--cv-line));background:transparent;color:var(--cv-danger)}
body.rz-circuits-v4 .layout{display:grid;grid-template-columns:286px minmax(380px,1fr) 318px;height:100%;min-height:0;gap:0;border:0;border-radius:0;background:var(--cv-panel);box-shadow:none;overflow:hidden}
body.rz-circuits-v4 .layout.inspector-hidden{grid-template-columns:286px minmax(380px,1fr)}
body.rz-circuits-v4 .layout.inspector-compact{grid-template-columns:286px minmax(380px,1fr) 270px}
body.rz-circuits-v4 .layout.inspector-wide{grid-template-columns:286px minmax(380px,1fr) 390px}
body.rz-circuits-v4 .sidebar{min-height:0;border:0;border-radius:0;background:var(--cv-panel);box-shadow:none}
body.rz-circuits-v4 .left-panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--cv-line)}
body.rz-circuits-v4 .shelf-fixed{flex:0 0 auto;padding:14px 12px 10px;border-bottom:1px solid var(--cv-line)}
body.rz-circuits-v4 .panel-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 0 10px}
body.rz-circuits-v4 .panel-heading h2{margin:0 0 3px;color:var(--cv-text);font-size:13px;line-height:1.3}
body.rz-circuits-v4 .panel-heading p{margin:0;color:var(--cv-muted);font-size:10px;line-height:1.45}
body.rz-circuits-v4 .count-pill{display:grid;place-items:center;min-width:27px;height:24px;padding:0 7px;border:1px solid var(--cv-line);border-radius:7px;background:var(--cv-panel-2);color:var(--cv-muted);font-size:10px;font-weight:800}
body.rz-circuits-v4 .search-wrap{display:block;margin:0}
body.rz-circuits-v4 .search-wrap>span{display:block;margin:0 0 5px;color:var(--cv-muted);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}
body.rz-circuits-v4 .search-wrap input{width:100%;height:36px;padding:0 10px;border:1px solid var(--cv-line);border-radius:8px;background:var(--cv-panel-2);color:var(--cv-text);outline:0;font-size:11px}
body.rz-circuits-v4 .search-wrap input::placeholder{color:#a19ca6}
body.rz-circuits-v4 .search-wrap input:focus{border-color:var(--cv-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cv-accent) 10%,transparent)}
body.rz-circuits-v4 .category-tabs{display:flex;gap:5px;margin-top:9px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
body.rz-circuits-v4 .category-tabs::-webkit-scrollbar{display:none}
body.rz-circuits-v4 .category-tab{flex:0 0 auto;height:28px;padding:0 8px;border:1px solid var(--cv-line);border-radius:7px;background:var(--cv-panel);color:var(--cv-muted);font-size:9px;font-weight:700;cursor:pointer}
body.rz-circuits-v4 .category-tab:hover{background:var(--cv-panel-2);color:var(--cv-text)}
body.rz-circuits-v4 .category-tab.active{border-color:var(--cv-accent);background:var(--cv-accent-soft);color:var(--cv-accent)}
body.rz-circuits-v4 .palette{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:9px 9px 18px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--cv-line-strong) transparent}
body.rz-circuits-v4 .palette::-webkit-scrollbar{width:8px}
body.rz-circuits-v4 .palette::-webkit-scrollbar-thumb{background:var(--cv-line-strong);border:2px solid var(--cv-panel);border-radius:999px}
body.rz-circuits-v4 .palette-section-title{padding:10px 6px 5px;color:var(--cv-muted);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
body.rz-circuits-v4 .palette-chip{display:grid;grid-template-columns:32px minmax(0,1fr) 20px;align-items:center;gap:9px;width:100%;margin:0 0 5px;padding:8px;border:1px solid var(--cv-line);border-radius:9px;background:var(--cv-panel);color:var(--cv-text);text-align:left;cursor:grab;box-shadow:none;transition:background .12s ease,border-color .12s ease}
body.rz-circuits-v4 .palette-chip:hover{background:var(--cv-panel-2);border-color:var(--cv-line-strong);transform:none}
body.rz-circuits-v4 .palette-chip:active{cursor:grabbing}
body.rz-circuits-v4 .palette-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid color-mix(in srgb,var(--chip-color) 40%,var(--cv-line));border-radius:8px;background:color-mix(in srgb,var(--chip-color) 12%,var(--cv-panel));color:var(--chip-color);font-size:12px;font-weight:800}
body.rz-circuits-v4 .palette-copy{min-width:0}
body.rz-circuits-v4 .palette-category{display:none}
body.rz-circuits-v4 .palette-chip strong{display:block;color:var(--cv-text);font-size:11px;line-height:1.3;font-weight:700}
body.rz-circuits-v4 .palette-chip small:last-child{display:block;margin-top:2px;color:var(--cv-muted);font-size:9px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.rz-circuits-v4 .drag-symbol{color:var(--cv-muted);font-size:15px;font-weight:400}
body.rz-circuits-v4 .workspace-panel{min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--cv-board)}
body.rz-circuits-v4 .workspace-toolbar{flex:0 0 auto;min-height:52px;padding:9px 12px;border:0;border-bottom:1px solid var(--cv-line);background:var(--cv-panel)}
body.rz-circuits-v4 .workspace-help strong{margin:0 0 2px;color:var(--cv-text);font-size:11px}
body.rz-circuits-v4 .workspace-help span,body.rz-circuits-v4 .zoom-controls{color:var(--cv-muted);font-size:9px;line-height:1.4}
body.rz-circuits-v4 .icon-button{width:30px;height:30px;min-height:30px;padding:0}
body.rz-circuits-v4 .workspace-viewport{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;background:var(--cv-board)}
body.rz-circuits-v4 .workspace{width:1800px;height:1200px;background:var(--cv-board)}
body.rz-circuits-v4 .grid-background{background-image:linear-gradient(var(--cv-board-line) 1px,transparent 1px),linear-gradient(90deg,var(--cv-board-line) 1px,transparent 1px);background-size:24px 24px;background-color:var(--cv-board)}
body.rz-circuits-v4 .empty-state{color:var(--cv-muted)}
body.rz-circuits-v4 .empty-icon{width:48px;height:48px;margin:0 auto 10px;border:1px solid var(--cv-line-strong);border-radius:10px;background:var(--cv-panel);color:var(--cv-muted);font-size:20px}
body.rz-circuits-v4 .empty-state h3{margin:0 0 6px;color:var(--cv-text);font-size:13px}
body.rz-circuits-v4 .empty-state p{font-size:10px;line-height:1.5}
body.rz-circuits-v4 .node{width:222px;border:1px solid var(--cv-node-line);border-radius:9px;background:var(--cv-node);box-shadow:0 5px 14px rgba(0,0,0,.16);color:var(--cv-node-text)}
body.rz-circuits-v4 .node::before{inset:0;border:0;border-top:3px solid var(--node-color);border-radius:8px 8px 0 0;box-shadow:none}
body.rz-circuits-v4 .node::after{display:none}
body.rz-circuits-v4 .node.selected{box-shadow:0 0 0 2px color-mix(in srgb,var(--cv-accent) 50%,transparent),0 6px 18px rgba(0,0,0,.2)}
body.rz-circuits-v4 .node.button-node{background:var(--cv-node);border-color:var(--cv-node-line)}
body.rz-circuits-v4 .node.button-node .node-kind,body.rz-circuits-v4 .node.button-node .node-summary{color:var(--cv-node-muted)}
body.rz-circuits-v4 .node-header{grid-template-columns:26px minmax(0,1fr) auto;gap:7px;padding:9px 9px 7px;border-bottom:1px solid rgba(255,255,255,.075);cursor:grab}
body.rz-circuits-v4 .node-header:active{cursor:grabbing}
body.rz-circuits-v4 .node-icon{width:24px;height:24px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:rgba(255,255,255,.05);font-size:10px;font-weight:800}
body.rz-circuits-v4 .node-title{color:var(--cv-node-text);font-size:11px;font-weight:720;line-height:1.25}
body.rz-circuits-v4 .node-kind{margin-top:2px;color:var(--cv-node-muted);font-size:8px;letter-spacing:0;text-transform:none}
body.rz-circuits-v4 .node-delete{color:#a9a9b1;font-size:15px}
body.rz-circuits-v4 .node-delete:hover{background:rgba(255,255,255,.08);color:#fff}
body.rz-circuits-v4 .node-body{padding:7px 0 10px}
body.rz-circuits-v4 .node-summary{min-height:0;padding:0 10px 7px;color:var(--cv-node-muted);font-size:9px;line-height:1.4}
body.rz-circuits-v4 .port-row{min-height:24px;padding-top:3px;padding-bottom:3px}
body.rz-circuits-v4 .port-label{color:var(--cv-node-text);font-size:9px}
body.rz-circuits-v4 .port-type{color:#90929b;font-size:7px;letter-spacing:0;text-transform:lowercase}
body.rz-circuits-v4 .port{width:13px;height:13px;border:2px solid #24262b;border-radius:50%;box-shadow:none;clip-path:none}
body.rz-circuits-v4 .input-port{left:-7px}
body.rz-circuits-v4 .output-port{right:-7px}
body.rz-circuits-v4 .port:hover{transform:scale(1.15);box-shadow:0 0 0 3px rgba(255,255,255,.08)}
body.rz-circuits-v4 .wire-path{stroke-width:3;filter:none}
body.rz-circuits-v4 .wire-path.exec{filter:none}
body.rz-circuits-v4 .wire-path.number,body.rz-circuits-v4 .wire-path.boolean,body.rz-circuits-v4 .wire-path.text,body.rz-circuits-v4 .wire-path.object,body.rz-circuits-v4 .wire-path.player{filter:none}
body.rz-circuits-v4 .button-gadget-wrap{width:auto;margin:9px 10px 0;align-items:stretch;gap:5px}
body.rz-circuits-v4 .button-gadget-line{display:none}
body.rz-circuits-v4 .button-gadget{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:34px;padding:0 10px;border:1px solid #5b5e67;border-radius:7px;background:#23252a;box-shadow:none;color:#f1f1f3;cursor:pointer}
body.rz-circuits-v4 .button-gadget-face{display:flex;align-items:center;justify-content:center;gap:7px;width:auto;height:auto;border:0;border-radius:0;background:none;color:inherit;font-size:9px;font-weight:800;line-height:1;text-shadow:none}
body.rz-circuits-v4 .button-gadget-face::before{content:"";display:block;width:8px;height:8px;border-radius:50%;background:#c9cbd0;box-shadow:inset 0 0 0 2px #7b7e86}
body.rz-circuits-v4 .button-gadget:hover{background:#292c31;border-color:#6b6f78}
body.rz-circuits-v4 .button-gadget:active,body.rz-circuits-v4 .button-gadget.pressed{transform:translateY(1px);background:#1d1f23}
body.rz-circuits-v4 .button-gadget:active .button-gadget-face,body.rz-circuits-v4 .button-gadget.pressed .button-gadget-face{transform:none;filter:none}
body.rz-circuits-v4 .button-gadget-caption{color:#8f9199;font-size:8px;letter-spacing:0;text-align:center}
body.rz-circuits-v4 .right-panel{display:grid;grid-template-rows:minmax(0,1.15fr) minmax(160px,.85fr);gap:0;overflow:hidden;border-left:1px solid var(--cv-line)}
body.rz-circuits-v4 .right-panel.panel-hidden{display:none}
body.rz-circuits-v4 .inspector-section,body.rz-circuits-v4 .output-section{padding:12px;overflow:hidden;background:var(--cv-panel)}
body.rz-circuits-v4 .inspector-section{border-bottom:1px solid var(--cv-line)}
body.rz-circuits-v4 .panel-heading.compact{margin-bottom:9px}
body.rz-circuits-v4 .mini-actions{gap:5px}
body.rz-circuits-v4 .text-button{border:0;background:transparent;color:var(--cv-accent);font-size:9px;font-weight:750;cursor:pointer}
body.rz-circuits-v4 .inspector,body.rz-circuits-v4 .output-log{height:100%;min-height:0;padding:10px;border:1px solid var(--cv-line);border-radius:9px;background:var(--cv-panel-2);color:var(--cv-text);overflow-y:auto}
body.rz-circuits-v4 .empty-inspector{color:var(--cv-muted)}
body.rz-circuits-v4 .inspector-icon{width:34px;height:34px;margin-bottom:8px;border:1px solid var(--cv-line);border-radius:8px;background:var(--cv-panel);color:var(--cv-muted)}
body.rz-circuits-v4 .inspector h3{font-size:12px}
body.rz-circuits-v4 .inspector .description{color:var(--cv-muted);font-size:10px;line-height:1.5}
body.rz-circuits-v4 .inspector-tip{padding:8px 9px;border:1px solid color-mix(in srgb,var(--cv-accent) 25%,var(--cv-line));border-left:3px solid var(--cv-accent);border-radius:7px;background:var(--cv-accent-soft);color:var(--cv-text);font-size:9px;line-height:1.5}
body.rz-circuits-v4 .field>span{margin-bottom:5px;color:var(--cv-muted);font-size:9px}
body.rz-circuits-v4 .field input,body.rz-circuits-v4 .field select{width:100%;height:34px;padding:0 9px;border:1px solid var(--cv-line);border-radius:7px;background:var(--cv-panel);color:var(--cv-text);font-size:10px;outline:0}
body.rz-circuits-v4 .field input:focus,body.rz-circuits-v4 .field select:focus{border-color:var(--cv-accent)}
body.rz-circuits-v4 .legend-pill{padding:5px 7px;border:1px solid var(--cv-line);border-radius:6px;background:var(--cv-panel);color:var(--cv-muted);font-size:8px}
body.rz-circuits-v4 .output-log{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body.rz-circuits-v4 .output-log *{font-family:inherit}
body.rz-circuits-v4 .log-line{padding:6px 0;border-bottom:1px solid var(--cv-line);color:var(--cv-muted);font-size:9px;line-height:1.45}
body.rz-circuits-v4 .log-line span{font-weight:800}
body.rz-circuits-v4 .inspector-dock-button{position:fixed;right:12px;bottom:12px;z-index:70;min-height:34px;padding:0 11px;border:1px solid var(--cv-line-strong);border-radius:8px;background:var(--cv-panel);color:var(--cv-text);box-shadow:var(--cv-shadow);font-size:10px;font-weight:750}
body.rz-circuits-v4 .toast{bottom:14px;padding:9px 12px;border:1px solid var(--cv-line-strong);border-radius:8px;background:var(--cv-panel);color:var(--cv-text);box-shadow:var(--cv-shadow);font-size:10px}
body.rz-circuits-v4 .mobile-circuit-tip,body.rz-circuits-v4 .mobile-workspace-hint{display:none}
@media(max-width:1080px){
  body.rz-circuits-v4 .layout{grid-template-columns:250px minmax(340px,1fr) 280px}
  body.rz-circuits-v4 .layout.inspector-hidden{grid-template-columns:250px minmax(340px,1fr)}
  body.rz-circuits-v4 .brand p{display:none}
  body.rz-circuits-v4 .top-actions{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-end}
  body.rz-circuits-v4 .top-actions .button{flex:0 0 auto}
}
@media(max-width:760px){
  body.rz-circuits-v4 .navbar{height:56px;min-height:56px}
  body.rz-circuits-v4 .navbar-container{width:calc(100% - 16px);height:56px;min-height:56px;gap:8px}
  body.rz-circuits-v4 .logo-image{height:29px;max-height:29px}
  body.rz-circuits-v4 .nav-menu{order:3;position:absolute;left:0;right:0;top:56px;height:34px;padding:3px 8px;background:var(--cv-panel);border-bottom:1px solid var(--cv-line)}
  body.rz-circuits-v4 .nav-link{height:27px;padding:0 8px;font-size:9px}
  body.rz-circuits-v4 .btn-login,body.rz-circuits-v4 .btn-signup,body.rz-circuits-v4 .btn-profile,body.rz-circuits-v4 .btn-logout,body.rz-circuits-v4 .user-greeting{min-height:30px;padding:0 8px;font-size:9px}
  body.rz-circuits-v4 .app-shell{height:calc(100dvh - 90px);margin-top:34px}
  body.rz-circuits-v4 .topbar{min-height:58px;padding:8px;gap:8px;overflow:hidden}
  body.rz-circuits-v4 .brand{display:none}
  body.rz-circuits-v4 .top-actions{width:100%;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  body.rz-circuits-v4 .top-actions::-webkit-scrollbar{display:none}
  body.rz-circuits-v4 .button{min-height:32px;padding:0 9px;font-size:9px}
  body.rz-circuits-v4 .layout,body.rz-circuits-v4 .layout.inspector-hidden,body.rz-circuits-v4 .layout.inspector-compact,body.rz-circuits-v4 .layout.inspector-wide{grid-template-columns:1fr;grid-template-rows:minmax(210px,38%) minmax(0,1fr);height:100%}
  body.rz-circuits-v4 .left-panel{grid-row:1;border-right:0;border-bottom:1px solid var(--cv-line)}
  body.rz-circuits-v4 .shelf-fixed{padding:9px 9px 7px}
  body.rz-circuits-v4 .panel-heading{margin-bottom:6px}
  body.rz-circuits-v4 .panel-heading p:not(.mobile-circuit-tip){display:none}
  body.rz-circuits-v4 .mobile-circuit-tip{display:block}
  body.rz-circuits-v4 .search-wrap>span{display:none}
  body.rz-circuits-v4 .search-wrap input{height:32px}
  body.rz-circuits-v4 .category-tabs{margin-top:6px}
  body.rz-circuits-v4 .category-tab{height:25px;font-size:8px}
  body.rz-circuits-v4 .palette{padding:6px 7px 12px}
  body.rz-circuits-v4 .palette-chip{grid-template-columns:28px minmax(0,1fr) 18px;padding:6px}
  body.rz-circuits-v4 .palette-icon{width:28px;height:28px}
  body.rz-circuits-v4 .workspace-panel{grid-row:2}
  body.rz-circuits-v4 .workspace-toolbar{min-height:42px;padding:6px 8px}
  body.rz-circuits-v4 .workspace-help span:not(.mobile-workspace-hint){display:none}
  body.rz-circuits-v4 .mobile-workspace-hint{display:block}
  body.rz-circuits-v4 .right-panel{position:fixed;left:8px;right:8px;bottom:8px;top:auto;z-index:80;height:min(58dvh,520px);border:1px solid var(--cv-line);border-radius:12px;box-shadow:0 18px 55px rgba(0,0,0,.32)}
  body.rz-circuits-v4 .right-panel.panel-hidden{display:none}
  body.rz-circuits-v4 .node{width:210px}
}
body.rz-circuits-v4 .layout{margin:0}
body.rz-circuits-v4 .left-panel{padding:0}
body.rz-circuits-v4 .right-panel{padding:0}
body.rz-circuits-v4 .workspace-panel{border:0;border-radius:0;box-shadow:none;overflow:hidden}