.rig-app #panel header { padding-bottom: 16px; }
.hint {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.selected {
  margin: 10px 0 4px;
  color: var(--gold);
  font-size: 22px;
}
.place-hint {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}
#bind.bind {
  width: 100%;
  background: var(--gold);
  color: #16140f;
  font-size: 16px;
  border-color: var(--gold);
}
#joints h2 {
  margin: 12px 4px 8px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
#joints button.joint.left { border-color: #2a5a72; }
#joints button.joint.right { border-color: #6a3228; }
#joints button.joint.left.active { border-color: #5ec8ff; color: #5ec8ff; }
#joints button.joint.right.active { border-color: #ff6b3d; color: #ff6b3d; }
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}
.back { color: var(--gold); }
.clip-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#clip {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: #0d0f14;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
#joints { padding: 12px 14px 24px; overflow: auto; }
#joints button.joint {
  width: 100%;
  margin-bottom: 6px;
}
#joints button.joint.active {
  border-color: var(--gold);
  color: var(--gold);
}
#stage { position: relative; }
.quad-labels {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  pointer-events: none;
}
.quad-labels span {
  padding: 10px 12px;
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  text-shadow: 0 1px 8px #000;
}