:root {
  --bg-color: #1C2530;
  --panel-bg: rgba(28, 37, 48, 0.65);
  --border-color: rgba(28, 219, 241, 0.15);
  --text-primary: #f0f6fc;
  --text-secondary: #9aa8b5;
  --accent: #1CDBF1;
  --layer-input: #1CDBF1;
  --layer-mid: #a78bfa;
  --layer-head: #fbbf24;
  --node-size: 84px;
  --node-sum: #eab308;
  --node-act: #ec4899;
  --node-bias: #fb923c;
  --font-main: 'Karla', sans-serif;
}

* { box-sizing: border-box; }

body {
  background: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-main);
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 20px;
}

#join-panel {
  max-width: 480px;
}

/* The facilitator's graph + matrix use the whole window. */
body.host-page {
  max-width: none;
  padding: 0 24px;
}

.node-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-top: 20px;
}

.left-column {
  flex: 0 0 340px;
  min-width: 0;
}

.tooltip-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  border-radius: 50%;
  font-size: 9px;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
  transition: all 0.2s;
}

.tooltip-icon:hover {
  background: var(--accent);
  color: #08282c;
}

.tooltip-anchor {
  cursor: help;
  text-decoration: underline dotted rgba(255, 255, 255, 0.3);
  text-underline-offset: 4px;
}

h1 { color: var(--accent); }
h2 { margin-top: 24px; font-size: 1.1rem; color: var(--text-secondary); }
a { color: var(--accent); }

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.network-badge {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(28, 219, 241, 0.1);
  border: 1px solid var(--border-color);
  border-radius: 999px;
}

.badge-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.badge-code {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.copy-btn {
  width: auto;
  margin-top: 0;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  background: rgba(28, 219, 241, 0.18);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 999px;
}

.copy-btn:hover {
  background: rgba(28, 219, 241, 0.3);
}

.copy-btn.copied {
  background: var(--accent);
  color: #08282c;
  border-color: var(--accent);
}

.subtle { color: var(--text-secondary); font-size: 0.85rem; margin-top: 8px; }

.identity-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: rgba(28, 219, 241, 0.12);
  border: 1px solid var(--border-color);
  border-radius: 999px;
}

.chip-name { font-weight: 700; color: var(--text-primary); }

.chip-type {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #08282c;
}

label {
  display: block;
  margin-top: 16px;
  margin-bottom: 4px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-transform: uppercase;
}

input, select {
  width: 100%;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
}

button {
  margin-top: 20px;
  width: 100%;
  padding: 12px;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #08282c;
  font-weight: 700;
  cursor: pointer;
}

.message { margin-top: 16px; font-size: 0.9rem; }
.error { color: #ef4444; }
.success { color: var(--accent); }

table { width: 100%; margin-top: 20px; border-collapse: collapse; table-layout: fixed; }
th, td {
  text-align: left;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-color);
}
th { color: var(--text-secondary); font-size: 0.75rem; text-transform: uppercase; }
td input, td select { padding: 8px 6px; font-size: 0.85rem; min-width: 0; }

.connection-line { transition: stroke 0.2s, stroke-width 0.2s; }

.network-canvas-root {
  flex: 1;
  min-width: 0;
  position: relative;
  min-height: 460px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.canvas-camera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  transition: transform 550ms ease;
}

.network-canvas-root .graph-node {
  transition: opacity 300ms ease;
}

.network-canvas-root .graph-node.is-me {
  box-shadow: 0 0 0 4px rgba(28, 219, 241, 0.4), 0 0 24px rgba(28, 219, 241, 0.3);
}

.network-canvas-root .graph-node.canvas-node-self {
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  transition: width 550ms ease, height 550ms ease, opacity 300ms ease;
}

/* Only the Neuron zoom level expands self to reveal its internals — self is
   the sole subject of that level's view, so it doesn't need to stay the same
   size as every other (dimmed/hidden) node the way it does at other levels.
   Still a circle, like every neuron in this app — just a bigger one. The
   same width/height transition above (not a JS-timed swap) animates this
   smoothly and identically in both directions. */
.network-canvas-root .graph-node.canvas-node-self.self-expanded {
  width: calc(var(--node-size) * 2.2);
  height: calc(var(--node-size) * 2.2);
  border-radius: 50%;
}

/* Collapsed by default — scaled down, dimmed and blurred so the shapes are
   still visible ("there's something in here") without being legible at the
   small node size. Expanding restores full scale/opacity/sharpness, all via
   the same transition, so it's one continuous zoom either direction. */
.self-internals {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: scale(0.4);
  opacity: 0.55;
  filter: blur(1.5px);
  transition: transform 550ms ease, opacity 550ms ease, filter 550ms ease;
}

.canvas-node-self.self-expanded .self-internals {
  transform: scale(1);
  opacity: 1;
  filter: blur(0);
}

.self-internals .mini-node {
  width: 40px;
  height: 40px;
  padding: 0;
  gap: 0;
}

.self-internals .mini-node .node-label {
  font-size: 0.6rem;
  line-height: 1;
}

.self-internals .mini-node .node-values {
  margin-top: 0;
}

.self-internals .mini-node .primary-val {
  font-size: 0.6rem;
}

.self-bias-chip {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--node-bias);
  background: rgba(251, 146, 60, 0.15);
  color: var(--node-bias);
  font-size: 0.55rem;
  font-family: monospace;
  line-height: 1.4;
  white-space: nowrap;
}

.zoom-controls {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}

.zoom-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 0.8rem;
  border-radius: 999px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
}

.zoom-btn.active {
  background: var(--accent);
  color: #08282c;
  font-weight: 700;
}

.graph-node {
  position: relative;
  width: var(--node-size);
  height: var(--node-size);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid var(--accent);
}

.node-layer-tag {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.chip-type-select {
  width: auto;
  padding: 3px 10px;
  margin-top: 0;
  border: none;
  border-radius: 999px;
  background: var(--accent);
  color: #08282c;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: inherit;
  cursor: pointer;
}

.formula-panel {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.formula-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.formula-caret {
  transition: transform 0.15s;
}

.formula-panel.collapsed .formula-toggle {
  margin-bottom: 0;
}

.formula-panel.collapsed .formula-caret {
  transform: rotate(-90deg);
}

.formula-panel.collapsed #formula-body,
.formula-panel.collapsed #weight-history-body {
  display: none;
}

.lr-chip {
  font-size: 0.75rem;
  font-family: monospace;
  font-weight: 700;
  color: var(--node-bias);
  padding: 6px 12px;
  border: 1px solid var(--node-bias);
  border-radius: 999px;
  background: rgba(251, 146, 60, 0.1);
}

.formula-line {
  font-family: monospace;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: break-word;
}

.formula-line strong {
  color: var(--text-primary);
}

.formula-line + .formula-line {
  margin-top: 6px;
}

.formula-sum { color: var(--node-sum); font-weight: 700; }
.formula-bias { color: var(--node-bias); font-weight: 700; }
.formula-act { color: var(--node-act); font-weight: 700; }

#forward-pass-panel {
  margin-top: 20px;
}

.forward-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.forward-actions button {
  width: auto;
  margin-top: 0;
}

#backward-panel {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
}

.backward-step {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 10px;
}

.backward-step-header {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 10px;
}

.backward-step button {
  width: auto;
  margin-top: 0;
  margin-right: 8px;
  margin-bottom: 8px;
}

.error-shares-table {
  width: 100%;
  margin: 10px 0;
  font-size: 0.8rem;
}

.error-shares-table th {
  text-align: left;
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 4px;
}

.error-shares-table td {
  padding: 4px;
  font-family: monospace;
}

.weight-diff {
  font-family: monospace;
  font-size: 0.75rem;
  margin-top: 6px;
}

.weight-diff.proposed {
  color: var(--node-bias);
}

.weight-diff.confirmed {
  color: var(--text-secondary);
}

.error-inputs table {
  width: 100%;
  margin-top: 10px;
  font-size: 0.8rem;
}

.error-inputs input,
.row-value-input {
  width: 5.5em;
}

.manual-tag,
.stale-note {
  font-size: 0.65rem;
  color: var(--node-bias);
  margin-left: 4px;
}

.weight-history-table {
  width: 100%;
  font-family: monospace;
  font-size: 0.75rem;
  border-collapse: collapse;
}

.weight-history-table th {
  text-align: left;
  color: var(--text-secondary);
  font-size: 0.65rem;
  text-transform: uppercase;
  padding: 4px;
}

.weight-history-table td {
  padding: 4px;
  border-top: 1px solid var(--border-color);
  vertical-align: top;
}

.weight-up { color: #4ade80; }
.weight-down { color: #f87171; }

.result-readout {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(28, 219, 241, 0.1);
  border: 1px solid var(--accent);
  border-radius: 10px;
}

.result-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.result-value {
  font-family: monospace;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--accent);
}

@keyframes value-glow {
  0% { box-shadow: 0 0 0 0 rgba(28, 219, 241, 0.9); }
  100% { box-shadow: 0 0 16px 8px rgba(28, 219, 241, 0); }
}

.graph-node.just-received {
  animation: value-glow 1.4s ease-out;
}

.row-value-received.just-received {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(28, 219, 241, 0.15);
  animation: value-glow 1.4s ease-out;
}

@keyframes connection-glow {
  0% { box-shadow: 0 0 0 0 rgba(167, 139, 250, 0.9); }
  100% { box-shadow: 0 0 22px 12px rgba(167, 139, 250, 0); }
}

.graph-node.new-connection {
  animation: connection-glow 1.8s ease-out;
}

@keyframes error-glow {
  0% { box-shadow: 0 0 0 0 rgba(251, 146, 60, 0.9); }
  100% { box-shadow: 0 0 22px 12px rgba(251, 146, 60, 0); }
}

.graph-node.error-received {
  animation: error-glow 1.6s ease-out;
}

@keyframes shake-wiggle {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10% { transform: translate(-3px, 2px) rotate(-4deg); }
  20% { transform: translate(3px, -2px) rotate(4deg); }
  30% { transform: translate(-3px, 2px) rotate(-4deg); }
  40% { transform: translate(3px, -2px) rotate(4deg); }
  50% { transform: translate(-2px, 1px) rotate(-2deg); }
  60% { transform: translate(2px, -1px) rotate(2deg); }
  70% { transform: translate(-2px, 1px) rotate(-2deg); }
  80% { transform: translate(2px, -1px) rotate(2deg); }
  90% { transform: translate(-1px, 0) rotate(0deg); }
}

@keyframes shake-glow {
  0% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.9); }
  100% { box-shadow: 0 0 24px 14px rgba(251, 191, 36, 0); }
}

.graph-node.shaking {
  animation: shake-wiggle 0.8s ease-in-out, shake-glow 0.8s ease-out;
}

@keyframes wire-shake-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(251, 191, 36, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.9)); }
}

.connection-line.shaking {
  animation: wire-shake-glow 0.8s ease-in-out;
}

.row-value-waiting {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-style: italic;
}

.row-value-received {
  font-family: monospace;
}

.received-tag {
  color: var(--accent);
  margin-left: 4px;
}

.row-value-stale {
  font-family: monospace;
  color: var(--text-secondary);
  opacity: 0.75;
}

.stale-tag {
  margin-left: 4px;
  opacity: 0.75;
}

.node-remove-btn {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  margin-top: 0;
  padding: 0;
  line-height: 18px;
  border-radius: 50%;
  background: #ef4444;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  border: none;
}

.node-subval {
  display: block;
  font-size: 0.65rem;
  font-family: monospace;
  color: var(--text-secondary);
  font-weight: 400;
  margin-top: 2px;
}

.sum-node {
  width: calc(var(--node-size) * 1.8);
  height: calc(var(--node-size) * 1.8);
  border-color: var(--node-sum);
  box-shadow: 0 0 30px rgba(234, 179, 8, 0.15);
}
.sum-node .node-label { font-size: 1rem; color: var(--node-sum); line-height: 1.2; }

.activation-node {
  width: calc(var(--node-size) * 1.5);
  height: calc(var(--node-size) * 1.5);
  border-color: var(--node-act);
  box-shadow: 0 0 30px rgba(236, 72, 153, 0.15);
}
.activation-node .node-label { color: var(--node-act); font-size: 0.85rem; }

.bias-label { font-size: 0.65rem; color: var(--text-secondary); }
.node-values { display: flex; flex-direction: column; align-items: center; margin-top: 4px; }
.primary-val { font-size: 1rem; font-family: monospace; }
.secondary-val { font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; font-family: monospace; }

.topology-diagram {
  position: relative;
  min-height: 420px;
  margin-top: 20px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.topology-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.topology-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 24px;
}

.topology-col {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.topology-col-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.node-input { border-color: var(--layer-input); }
.node-mid { border-color: var(--layer-mid); }
.node-head { border-color: var(--layer-head); }

.command-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.command-bar .inline-label {
  display: inline;
  margin: 0;
  font-size: 0.75rem;
  text-transform: none;
  color: var(--text-secondary);
}

.command-bar input[type="number"] {
  width: 70px;
  padding: 6px 8px;
}

.cmd-btn, .phase-btn {
  width: auto;
  margin-top: 0;
  padding: 8px 14px;
  font-size: 0.85rem;
  background: rgba(28, 219, 241, 0.12);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.cmd-btn:hover, .phase-btn:hover {
  background: rgba(28, 219, 241, 0.22);
}

.manage-panel {
  margin-top: 16px;
  padding: 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.manage-panel h2 {
  margin: 0 0 10px;
  font-size: 1rem;
}

.room-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color);
}

.room-row:last-child {
  border-bottom: none;
}

.room-row-info {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #ef4444;
}

.btn-danger:hover {
  background: rgba(239, 68, 68, 0.28);
}

.link-btn {
  display: inline-block;
  margin-top: 8px;
  padding: 12px 20px;
  background: var(--accent);
  color: #08282c;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
}

.phase-toggle {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}

.phase-btn {
  border-radius: 999px;
  background: transparent;
  border: none;
}

.phase-btn.active {
  background: var(--accent);
  color: #08282c;
  font-weight: 700;
}

.lock-btn.locked {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
}

#shake-toggle-btn.active {
  background: rgba(251, 191, 36, 0.2);
  border-color: rgba(251, 191, 36, 0.5);
  color: #fbbf24;
}

.phase-badge {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--accent);
  padding: 6px 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
}

.phase-badge.backward { color: var(--layer-mid); border-color: var(--layer-mid); }

.inline-form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.prediction-readout {
  font-family: monospace;
  font-size: 0.85rem;
  color: var(--node-act);
}

.inline-form label { margin: 0; }
.inline-form input { width: 100px; }
.inline-form input[type="text"] { width: 220px; }
.inline-form .message { margin-top: 0; }

.lock-note, .truth-banner {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
}

.lock-note {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f0f6fc;
}

.truth-banner {
  background: rgba(28, 219, 241, 0.1);
  border: 1px solid var(--border-color);
  color: var(--accent);
  font-family: monospace;
}

#wiring-panel.locked {
  opacity: 0.5;
  pointer-events: none;
}

.landing-hero {
  max-width: 560px;
  margin: 20vh auto 0;
  text-align: center;
}

.landing-hero h1 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 16px;
}

.landing-tagline {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 auto 28px;
}

.landing-layers {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 32px;
}

.landing-layer-pill {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.landing-layer-pill.input { border-color: var(--layer-input); color: var(--layer-input); }
.landing-layer-pill.mid { border-color: var(--layer-mid); color: var(--layer-mid); }
.landing-layer-pill.head { border-color: var(--layer-head); color: var(--layer-head); }

.landing-cta {
  display: inline-block;
  padding: 14px 32px;
  background: var(--accent);
  color: #08282c;
  font-weight: 700;
  text-decoration: none;
  border-radius: 8px;
}

.landing-cta:hover {
  opacity: 0.9;
}

.landing-hint {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

/* ---- Facilitator matrix view ---- */

/* Edges are hoverable (for hover linking); the node layer still ignores the mouse except on nodes. */
#topology-nodes { pointer-events: none; }
#topology-nodes .graph-node { pointer-events: auto; }
#topology-svg .connection-line { pointer-events: stroke; }

.matrix-view {
  margin-top: 16px;
  /* Same border and 24px side padding as .topology-diagram / .topology-nodes, so every block sits exactly under its graph column. */
  padding: 10px 24px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.mx-caption {
  margin-bottom: 8px;
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-align: center;
}

.mx-cols { display: flex; }

.mx-col {
  flex: 1 1 0; /* equal widths, like .topology-col, so each block sits under its own layer */
  min-width: 0;
  overflow-x: auto; /* only if a layer has so many sources that it can't fit its column */
  padding: 0 2px 4px;
}

.mx-empty {
  padding: 18px 0;
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-align: center;
}

.mx-eq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: max-content;
  min-width: 100%;
}

.mx-line {
  display: flex;
  align-items: center;
  gap: 2px;
}

.mx-op {
  color: var(--text-secondary);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* One matrix: optional column dots above, [dots | bracket], symbol underneath. */
.mx-mat { display: flex; flex-direction: column; }

.mx-mat-head,
.mx-mat-foot {
  height: 12px;
  font-size: 0.6rem;
  font-style: italic;
  line-height: 12px;
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
}

.mx-mat-head { display: flex; align-items: center; }
.mx-spacer { width: 12px; flex: none; }
.mx-head-cols { display: flex; padding: 0 5px; /* bracket rule + padding */ }
.mx-head-cell { width: 38px; display: flex; justify-content: center; }

.mx-mat-body { display: flex; align-items: stretch; }

.mx-dotcol { width: 12px; padding: 4px 0; }
.mx-dotrow { height: 22px; display: flex; align-items: center; justify-content: center; }
/* The input vector's rows carry a variable name beside the dot: size the column to the name, so it can't spill into the bracket. */
.mx-dotcol-labeled { width: auto; padding-right: 6px; }
.mx-dotcol-labeled .mx-dotrow { justify-content: flex-end; white-space: nowrap; }

.mx-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transition: transform 0.15s, box-shadow 0.15s;
}

.mx-bracket {
  position: relative;
  padding: 4px 3px;
  border-left: 2px solid var(--text-secondary);
  border-right: 2px solid var(--text-secondary);
}

/* serifs: short horizontal ticks at the top and bottom corners */
.mx-bracket::before,
.mx-bracket::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  height: 2px;
  background:
    linear-gradient(var(--text-secondary), var(--text-secondary)) left / 5px 2px no-repeat,
    linear-gradient(var(--text-secondary), var(--text-secondary)) right / 5px 2px no-repeat;
}
.mx-bracket::before { top: 0; }
.mx-bracket::after { bottom: 0; }

.mx-mrow { display: flex; height: 22px; align-items: center; }

/* Plain numbers: no boxes, so it reads as a matrix, not a table of chips. */
.mx-cell {
  width: 38px;
  padding: 0 2px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 0.75rem;
  text-align: right;
  line-height: 22px;
  color: var(--text-primary);
  transition: background 0.15s, opacity 0.2s;
}

.mx-w.mx-pos { color: #34d399; }
.mx-w.mx-neg { color: #f87171; }
.mx-w.mx-absent { color: var(--text-secondary); opacity: 0.4; }
.mx-x { color: var(--node-act); } /* a layer's output, reused as the next layer's input: same colour as .mx-a */
.mx-b { color: var(--node-bias); }
.mx-z { color: var(--node-sum); }
.mx-a { color: var(--node-act); }
.mx-a.mx-stale { opacity: 0.45; }

/* Hover linking: the same classes light up graph nodes, edges and matrix numbers. */
.mx-cell.link-hl { background: rgba(28, 219, 241, 0.28); }
.mx-cell.link-hl-soft { background: rgba(28, 219, 241, 0.12); }
.graph-node.link-hl { box-shadow: 0 0 0 2px var(--accent), 0 0 14px rgba(28, 219, 241, 0.55); }
.graph-node.link-hl-soft { box-shadow: 0 0 0 1px rgba(28, 219, 241, 0.6); }
path.link-hl { stroke-width: 5; filter: drop-shadow(0 0 5px rgba(28, 219, 241, 0.9)); }
path.link-hl-soft { filter: drop-shadow(0 0 3px rgba(28, 219, 241, 0.6)); }
.mx-dot.link-hl { transform: scale(1.7); box-shadow: 0 0 6px rgba(255, 255, 255, 0.8); }
.mx-dot.link-hl-soft { transform: scale(1.3); }

/* Colour dot on each graph node, matching that node's dots in the matrix. */
.node-dot {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--bg-color);
}

@keyframes mx-flash {
  0% { background: rgba(28, 219, 241, 0.55); }
  100% { background: transparent; }
}

.mx-cell.mx-flash { animation: mx-flash 1.2s ease-out; }

/* A calculated-but-unsent output: dashed, accent-coloured, so it reads as "waiting" until it's sent. */
.node-subval.pending {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  padding: 2px 8px;
  white-space: nowrap;
  color: var(--accent);
  font-weight: 700;
  background: var(--panel-bg);
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
}

.graph-node .output-badge {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 4px;
  padding: 2px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--panel-bg);
  border: 1.5px dashed var(--accent);
  border-radius: 8px;
  animation: value-glow 1.4s ease-out;
}

.graph-node .output-badge small {
  font-size: 0.55rem;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Set Connections reflects whether the wiring on screen is what the server has. */
#set-connections-btn.saved { background: transparent; color: #34d399; border: 1px solid rgba(52, 211, 153, 0.5); cursor: default; }
#set-connections-btn:disabled:not(.saved) { opacity: 0.5; }

.wiring-hint {
  margin-left: 10px;
  font-size: 0.8rem;
  color: var(--node-bias);
}

.node-variable {
  display: block;
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--text-secondary);
}

.chip-name + .node-variable {
  display: inline;
  font-size: 0.8rem;
}

.mx-dot-var {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mx-var {
  font-size: 0.65rem;
  color: var(--text-secondary);
}

dialog.app-dialog {
  max-width: min(420px, 90vw);
  padding: 20px 22px;
  background: #1C2530;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

dialog.app-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

dialog.app-dialog p {
  margin: 0 0 14px;
  line-height: 1.4;
}

dialog.app-dialog input {
  width: 100%;
  margin-bottom: 14px;
}

.app-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.app-dialog-actions .cmd-btn {
  width: auto;
  margin: 0;
}

.connection-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 8px 16px;
  text-align: center;
  font-size: 0.9rem;
  background: #fbbf24;
  color: #1C2530;
}
.connection-banner[hidden] { display: none; }

.graph-node.offline { opacity: 0.4; filter: grayscale(0.7); }

.demo-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.demo-note { font-size: 0.85rem; color: var(--text-secondary); }
.demo-readout { font-family: monospace; font-size: 0.85rem; color: var(--text-primary); }
.demo-result { color: var(--node-act); }
.demo-panel select { width: auto; }

/* Backward-pass weight changes: direction is the arrow, colour only echoes it (edge colour already means weight sign). */
.mx-cell.mx-tween { font-size: 0.68rem; }
.mx-w.mx-up, .mx-w.mx-down, .mx-b.mx-up, .mx-b.mx-down { position: relative; }
.mx-up { background: rgba(52, 211, 153, 0.16); }
.mx-down { background: rgba(248, 113, 113, 0.16); }
/* A corner mark, so it sits above the number's baseline instead of crowding a minus sign. */
.mx-up::before, .mx-down::before {
  position: absolute;
  left: 2px;
  top: 1px;
  font-size: 0.45rem;
  line-height: 8px;
}
.mx-up::before { content: '▲'; color: #34d399; }
.mx-down::before { content: '▼'; color: #f87171; }
text.weight-marker { font-weight: 700; paint-order: stroke; stroke: #0d1117; stroke-width: 3px; }
text.weight-marker.weight-up { fill: #34d399; }
text.weight-marker.weight-down { fill: #f87171; }

/* Demo charts. Series hues are the dataviz palette's first three dark-mode slots, validated on this app's #1C2530 surface. */
.training-charts {
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-muted: #7d8b99; /* layers beyond the three validated hues, and weights whose neuron has left */
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  flex-basis: 100%;
  margin-top: 6px;
}
.training-chart { position: relative; flex: 1 1 340px; max-width: 560px; }
.training-chart h3 { margin: 0 0 4px; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
.chart-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: none; }
.chart-svg:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.chart-grid line { stroke: rgba(154, 168, 181, 0.18); stroke-width: 1; }
.chart-grid line.chart-zero { stroke: rgba(154, 168, 181, 0.45); }
.chart-tick, .chart-axis-title { fill: var(--text-secondary); font-size: 10px; font-family: monospace; }
.chart-axis-title { font-style: italic; }
.chart-empty { fill: var(--text-secondary); font-size: 11px; }
.chart-cross { stroke: rgba(154, 168, 181, 0.6); stroke-width: 1; pointer-events: none; }
.wline, .eline { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: 0.85; }
.training-weights.has-focus .wline { opacity: 0.18; }
.training-weights.has-focus .wline.is-focus { opacity: 1; stroke-width: 3; }
.edot { stroke: #1C2530; stroke-width: 2; }
.chart-direct-label { fill: var(--text-primary); font-size: 10px; font-family: monospace; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 4px; font-size: 0.75rem; color: var(--text-secondary); }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend-key { display: inline-block; width: 14px; height: 2px; border-radius: 1px; }
.chart-tip {
  position: absolute;
  z-index: 5;
  min-width: 120px;
  padding: 6px 9px;
  background: #0d1117;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  pointer-events: none;
  font-size: 0.75rem;
}
.chart-tip[hidden] { display: none; }
.chart-tip-value { font-family: monospace; font-weight: 700; font-size: 0.85rem; color: var(--text-primary); }
.chart-tip-detail { color: var(--text-secondary); }
.training-table { flex-basis: 100%; font-size: 0.8rem; }
.training-table summary { cursor: pointer; color: var(--text-secondary); }
.training-table table { margin-top: 6px; border-collapse: collapse; font-family: monospace; }
.training-table th, .training-table td { padding: 2px 12px 2px 0; text-align: left; font-weight: 400; }
.training-table th { color: var(--text-secondary); }

/* Training panel: the charts live here for the demo and a real class alike. */
.training-panel .training-charts { margin-top: 0; }
.training-panel .message { margin-top: 0; }

/* What the network graph's edges show. */
.edge-mode { display: flex; align-items: center; gap: 0; margin-top: 12px; }
.edge-mode-label { margin: 0 10px 0 0; font-size: 0.8rem; color: var(--text-secondary); white-space: nowrap; }
.edge-mode-btn {
  width: auto;
  margin: 0;
  flex: none;
  padding: 5px 12px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.edge-mode-btn:first-of-type { border-radius: 999px 0 0 999px; }
.edge-mode-btn:last-of-type { border-radius: 0 999px 999px 0; }
.edge-mode-btn + .edge-mode-btn { margin-left: -1px; }
.edge-mode-btn:hover { color: var(--text-primary); }
.edge-mode-btn.active { color: var(--accent); border-color: var(--accent); background: rgba(28, 219, 241, 0.1); position: relative; }